仅当使用引导程序填写所有必需的 attr 字段时，如何提交表单？
Posted
技术标签:
【中文标题】仅当使用引导程序填写所有必需的 attr 字段时，如何提交表单？【英文标题】：How to submit a form only if all the required attr fields are filled using bootstrap? 【发布时间】：2017-08-04 10:11:45 【问题描述】：只有当所有输入字段都具有required="required" 属性时，我才必须提交表单。
我的表格：
<form method="post" action="/actions.php/" data-js-validate="true" data-js-highlight-state-msg="true" data-js-show-valid-msg="true">
<input type="text" name="amount[]" required="required" placeholder="Amount" class="inputChangeVal" data-js-input-type="number" />
<input type="text" name="grade[]" required="required" placeholder="Amount" class="inputChangeVal" data-js-input-type="number" />
<button class="btn" type="submit" name="confirm" >Pay Now</button>
</form>
我想在显示消息框后提交表单。 如您所见，我的表单操作是另一个 php 文件。 所以我阻止默认行为，然后在单击继续按钮时发送表单。 我为此使用引导程序。
引导模型：
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Proccess Payment</h4>
</div>
<div class="modal-body">
<p>
"Your about to make a online payment. Click 'Edit' to review the data before proceeding or click 'Continue' to confirm the details for payment."
</p>
<button class="btn btn-default" data-dismiss="modal">Edit</button>
<button class="btn btn-primary" id="continuebtn">Continue</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
还有 jQuery：
<script>
jQuery( document ).ready(function()
/* for boot strap model */
jQuery('#payBtn').on('click',function(e)
e.preventDefault();
jQuery('#myModal').modal('toggle');
);
jQuery('#continuebtn').on('click',function()
jQuery('form').submit();
);
);
</script>
但是如果我点击按钮Continue 按钮，这个发送来自。
无论输入字段是否填写..
我想要的是只有在填写 required="required" 的文件时才应提交表单..
我该怎么做？
【问题讨论】：
值得关注form-validation 【参考方案1】：首先在提交按钮上添加一个名为“payBtn”的 id 属性。
之后
用你当前的js替换下面的jquery
<script>
jQuery( document ).ready(function()
jQuery('#payBtn').on('click',function(e)
e.preventDefault();
var empty = false;
jQuery('input:text').each(function()
if(jQuery(this).val()=='')
console.log('error');
empty = false;
else empty = true;
);
if(empty)
jQuery('#myModal').modal('toggle');
else
console.log('your error message');
);
jQuery('#continuebtn').on('click',function()
jQuery('form').submit();
);
);
【讨论】：
您是否将输入类型文本更改为其他任何内容？【参考方案2】： $('form').on('submit', function(event)
event.preventDefault();
event.stopPropagination();
var check = true;
$('*[requiered]').each(function()
// run other filter functions here
if($(this).val().trim().length < 1)
check = false;
´ );
if(!check)
alert('something is missing');
else
// all is fine
$(this).submit();
)
这样的？
【讨论】：
是的..就是这样，我想显示一个弹出窗口，显示警告消息，在提交之前应该填写哪些字段.. 在我设置 check = false 的那一刻，您只需通过alert($(this).attr('name') + ' is not filled');附加输入标签
实际上，如果我尝试您的代码，它会在控制台 Uncaught SyntaxError: Invalid or unexpected token 上显示此错误
啊，我知道为什么，有一个很大的失败；）当最后调用 form.submit 时，表单提交是错误的监听器。这是一个无限循环。我在下面发布了一个工作示例【参考方案3】：
您可以在 jQuery 函数中添加一些条件：
jQuery('#continuebtn').on('click',function()
if($("#myInput").val() != "")
jQuery('form').submit();
);
这样，您可以为每个输入执行特定操作。
但是还有另一种方法是同时检查所有包含“必需”属性的输入
var missingFieldCounter = 0; // we count the number of field missing
jQuery('#continuebtn').on('click',function()
$(':input[required]').each(function() // for each input that contains "required" attribute
if($(this).val() == "") // if the required input is not filled
missingFieldCounter+=1;
$(this).after("<b>You have to fill this field</b>"); // we print a message after the input
);
if(missingFieldCounter == 0) // if the counter has never been incremented (every field is filled)
jQuery('form').submit();
);
See the fiddle Here
【讨论】：
谢谢..我知道..但忘了提..我想显示一条警告消息“此字段是补充性的” 如果我使用你的代码，它会直接转到actions.php
经过一些测试，似乎还可以。这是我所做的一个小提琴：jsfiddle.net/cv0cc6g2
谢谢……但我的id="continuebtn" 在引导模型中。检查问题中的代码..引导模型部分..
让我们continue this discussion in chat.【参考方案4】：
这是一个工作示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test-Projekt</title>
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=10">
<link href="favicon.ico" rel="Shortcut icon">
</head>
<body>
<form action="" method="GET">
<div>
<label>required input</label>
</div>
<div>
<input type="text" name="myInput" required>
</div>
<div>
<button id="btn_submit" type="submit">Submit Form</button>
</div>
</form>
</body>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous">
</script>
<script type="application/javascript">
$(document).ready(function()
$('#btn_submit').on('click', function(event)
event.preventDefault();
event.stopPropagation();
var formElement = $(this).parents('form');
formElement.find('input:required').each(function()
var minLength = 1;
var value = $(this).val();
var checked = true;
if(value.trim().length < minLength)
console.log('length is not ok');
checked = false;
if(!checked)
console.log($(this).attr('name') + ' is not correctly filled!');
else
console.log('all is ok');
formElement.submit();
);
);
);
</script>
</html>
顺便说一句。如果您使用 html 5 并且您不执行任何操作，则现代浏览器将自动检查每个具有所需属性的输入。这就是原因，因为如果不需要过滤特殊字符的字段，我不会使用它。
【讨论】：
【参考方案5】：如果$('#formid').submit()没有像我们点击提交按钮那样显示缺失的字段，那么创建一个隐藏的提交按钮并模拟点击呢？
如果您在表单中添加以下内容：
<input id="send" type="submit" style="display: none"/>
现在是 JavaScript 部分：
$(document).ready(function()
$('#continuebtn').on('click', function(event)
$('#send').trigger('click');
)
);
您会看到，当您单击#continuebtn 时，您会看到缺少的字段。
浏览器已经知道缺少的字段在哪里。重用它而不是编写 jquery 调用并重新发明***，效率更高。
我相信这不是最好的解决方案，但它只需要对我们的代码库进行很少的修改即可。
【讨论】：
【参考方案6】：您可以通过在输入类型中包含 required 来轻松地创建必填字段。 我的例子：
<div class="contact-form-value">
<input required type="text" name="PhoneNumber" id="phonenumber">
</div>
【讨论】：
以上是关于仅当使用引导程序填写所有必需的 attr 字段时，如何提交表单？的主要内容，如果未能解决你的问题，请参考以下文章