Question

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

$('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>

Answer 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 */
});

通过这种方式，它可以同时处理多个错误，并且您可以更好地控制点击事件。

Answer 2

如果你的按钮有类型=＆＃34;提交＆＃34;添加到它。

Answer 3

将验证放在函数中，例如

function validate() {
// validation code
 }

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

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

3 个答案: