如果所有验证都正确，我该如何提交我的表格？答案

【问题标题】：How can I submit my form if all the validation is correct?如果所有验证都正确，我该如何提交我的表格？
【发布时间】：2016-04-13 14:09:53
【问题描述】：

我刚刚完成验证工作。当我按下提交时，会出现一个错误框，其中包含与该字段相关的错误（例如使用了特殊字符）。当所有字段都正确时，我现在需要提交表单。我怎样才能做到这一点？当我按下提交时，没有任何反应。

$('button#form-submit').click(function() {
		$.each($("form#all-details input,form#all-details select"),function(a,b){
			if (typeof $(this).attr("data-type") != "undefined") {
				if ($(this).val()=="") {
					dialogWarning('Failure with form submit', '<p>Field <b>"'+$(this).prop("placeholder")+'"</b> must be populated</p>');
					return false;
				};
				if ($(this).attr("data-type")=="text") {
					if (/^[a-z0-9 ]+$/i.test($(this).val())===false) {
						dialogWarning('Failure with form submit', '<p>Please do not use special characters in field <b>"'+$(this).prop("placeholder")+'"</b></p>');
						return false;
					};
				} else if ($(this).attr("data-type")=="number") {
					if ($.isNumeric($(this).val())===false){
						dialogWarning('Failure with form submit', '<p>Field <b>"'+$(this).prop("placeholder")+'"</b> must be a number only</p>');
						return false;
					}
				}
			};
		});
		/* Submit form */
    });

<form id="all-details" onSubmit="return false;" action="add_Consignee.php" method="POST">
	Consignee:</br>
  <input type="text" name="Consignee" id="text" data-type="text" placeholder="Consignee"></br>
	Name:</br>
  <input type="text" name="Name" data-type="text" placeholder="Name" ></br>
  <input type="number" name="Forwarder_Contact_Number" data-type="number" placeholder="Forwarder Contact Number"></br>	
    Any Special Requirements?</br>
  <input type="text" name="Special_Req" data-type="text" placeholder="Any Special Requirements"></br> </br>  
  <button id="form-submit">Submit</button>
</form>

【问题讨论】：

注意： 您的 return false 将脱离 $.each 而不是提交处理程序。你可以做一个$('#all-details').submit()（在$.each之外）来提交表格；那是在将被验证并在每个验证中设置的标志之后。
验证完成后，$('#all-details').submit() 应该可以解决问题。
@JIMMYTHECODE 删除return false 并使用event.preventDefault。 $('button#form-submit').click(function(event)... 然后在里面作为你的第一行 event.preventDefault()。在您验证之前，这应该会阻止提交。
我已经用一个 100% 功能齐全的表单更新了 JSFiddle，减去了你的 dialogWarning 调用，我用一个简单的警报替换了它。 jsfiddle.net/3ggzkcss/2
您的问题必须在代码中的其他位置。我完全复制了您的内容，进行了我提到的更改，然后注释掉了您的 dialogWarnings，JSFiddle 非常适合我。

标签： javascript jquery forms validation

【解决方案1】：

我会这样做：

$('button#form-submit').click(function() {
var _errors = [];
$.each($("form#all-details input,form#all-details select"),function(a,b){
    if (typeof $(this).attr("data-type") != "undefined") {
        if ($(this).val()=="") {
            _errors.push('<p>Field <b>"'+$(this).prop("placeholder")+'"</b> must be populated</p>');
        };
        if ($(this).attr("data-type")=="text") {
            if (/^[a-z0-9 ]+$/i.test($(this).val())===false) {
                _errors.push('<p>Please do not use special characters in field <b>"'+$(this).prop("placeholder")+'"</b></p>');
                _errors++;
            };
        } else if ($(this).attr("data-type")=="number") {
            if ($.isNumeric($(this).val())===false){
                _errors.push('<p>Field <b>"'+$(this).prop("placeholder")+'"</b> must be a number only</p>');
                _errors++;
            }
        }
    };
});
if (_errors.length > 0) {
    dialogWarning('Failure with form submit', _errors.join(' ');
    return false;
} else {
    $(this).submit();
}
/* Submit form */
});

这样它会一次处理多个错误，并且您可以更好地控制点击事件。

【讨论】：

你已经摆脱了对话框警告这是我需要的验证错误弹出

【解决方案2】：

如果您的按钮添加了 type="submit" 这应该可以工作。

【讨论】：

【解决方案3】：

将您的验证放在一个函数中，例如

function validate() {
// validation code
 }

然后在你的表单中调用它：onSubmit="validate()"

【讨论】：