我有一个带有jQuery验证的表单(测试示例)。一切都是好的"直到没有更多验证错误,然后某些东西阻止了提交表单。在我看来,代码中的一切似乎都很好,但是不起作用。有任何想法吗?谢谢。
我的代码:
$(document).ready(function () {
$("#submit").click(function (event) {
event.preventDefault();
$("#dialog-input").html("");
var input1 = $('#input1').val();
var input2 = $('#input2').val();
var input3 = $('#input3').val();
var valid = true;
if (input1 == ""){
$('.in1').removeClass('valid').addClass('error');
$("#dialog-input").append("<p>Empty Input 1</p>");
valid = false;
}
else { $('.in1').removeClass('error').addClass('valid'); }
if (input2 == "") {
$('.in2').removeClass('valid').addClass('error');
$("#dialog-input").append("<p>Empty Input 2</p>");
valid = false;
}
else { $('.in2').removeClass('error').addClass('valid'); }
if (input3 == "") {
$('.in3').removeClass('valid').addClass('error');
$("#dialog-input").append("<p>Empty Input 3</p>");
valid = false;
}
else { $('.in3').removeClass('error').addClass('valid'); }
if( !valid){
$(function () {
$("#dialog-input").dialog({
modal: true,
buttons: {
Ok: function () {
$(this).dialog("close");
}
}
});
});
}
else{ return valid; }
});
});
工作jsfiddle:https://jsfiddle.net/nitadesign/rwe2ywrs/7/
jsfiddle只是整个脚本和表单的缩写版本。
答案 0 :(得分:1)
只需删除event.preventDefault()
并使用jquery样式事件控件返回true
或false
进行事件传播控制?
我已经更新了你的小提琴:https://jsfiddle.net/alokrajiv/rwe2ywrs/12/
SNIPPET如下,但表单提交受SO中的安全策略保护,因此该代码段可能不起作用。但它的权利。检查小提琴是否工作!!
$(document).ready(function() {
$("#submit").click(function(event) {
$("#dialog-input").html("");
var input1 = $('#input1').val();
var input2 = $('#input2').val();
var input3 = $('#input3').val();
var valid = true;
if (input1 == "") {
$('.in1').removeClass('valid').addClass('error');
$("#dialog-input").append("<p>Empty Input 1</p>");
valid = false;
} else {
$('.in1').removeClass('error').addClass('valid');
}
if (input2 == "") {
$('.in2').removeClass('valid').addClass('error');
$("#dialog-input").append("<p>Empty Input 2</p>");
valid = false;
} else {
$('.in2').removeClass('error').addClass('valid');
}
if (input3 == "") {
$('.in3').removeClass('valid').addClass('error');
$("#dialog-input").append("<p>Empty Input 3</p>");
valid = false;
} else {
$('.in3').removeClass('error').addClass('valid');
}
if (!valid) {
$(function() {
$("#dialog-input").dialog({
modal: true,
buttons: {
Ok: function() {
$(this).dialog("close");
}
}
});
});
}
return valid;
});
});
&#13;
.val-noshow {
display: none;
}
.error {
border: 1px #F00 solid;
color: #F00;
}
.valid {
border: 1px #979 solid;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />
<form method='post' action='submit.php'>
input 1:
<input type="text" id="input1" name="input1" class="in1">
<br>input 2:
<input type="text" id="input2" name="input2" class="in2">
<br>input 3:
<input type="text" id="input3" name="input3" class="in3">
<br>
<input type="submit" value="Submit" id="submit" name="submit">
</form>
<div id="dialog-input" title="Error" class="val-noshow"></div>
&#13;
答案 1 :(得分:1)
您正在阻止默认,因此它不会触发对&#34; submit.php&#34;的调用。
尽量避免<input type="submit" />
,请使用<button>
。它有很多优点。
请仔细阅读:
input type="submit" Vs button tag are they interchangeable?
Difference between <input type='button' /> and <input type='submit' />
更改为to后,单击验证表单,然后手动调用submit.php。
答案 2 :(得分:0)
第event.preventDefault()
行阻止了表单提交。
在$('this').closest('form').submit()
return valid;
行