我的表单验证工作正常，但提交的值不会发送到process.php文件。点击提交按钮时没有任何动作。请帮我。我是jquery的新手。
<script>
$( "#myform" ).validate({
debug: true,
errorClass:'error help-inline',
validClass:'success',
errorElement:'span',
highlight: function (element, errorClass, validClass) {
$(element).parents("div.control-group").addClass(errorClass).removeClass(validClass);
},
unhighlight: function (element, errorClass, validClass) {
$(element).parents(".error").removeClass(errorClass).addClass(validClass);
},
rules: {
name: "required",
city: "required",
age: "required",
email: {
required: true,
email: true
},
phone: "required",
},
messages: {
name: "name required",
city: "city required",
age: "age required",
email: {
required: "email required",
email: "wrong format"
},
phone: "10 digit mobile"
},
submitHandler: function(form) {
form.submit();
}
});
</script>
<!-- html code for the form is -->
<form class="common" id="myform" method="post" action="process.php">
<div class="block2">
<div class="textclass">
<input type="text" class="required " name="name" id="name" placeholder="Name*" required />
</div>
</div>
<div class="block3">
<div class="textclass">
<input type="email" class="required email " name="email" id="email" placeholder="E-Mail*" required/>
</div>
</div>
<div class="block4">
<div class="textclass">
<input type="text" class="required city " name="city" id="city" placeholder="City*" required/>
</div>
</div>
<div class="block6">
<div class="textclass">
<input type="text" class="" name="age" id="age" placeholder="Enter Age*" pattern="[0-9]{2}" required/>
</div>
</div>
<div class="block8">
<div class="textclass">
<input type="text" class="required number phone" name="phone" id="phone" pattern="[0-9]{10}" placeholder="Phone No.*" required/>
</div>
</div>
<div class="submitclass">
<input type="submit" id="submit" value="submit" name="submit">
</div>
</form>
答案 0 :(得分：1)
确保没有名称=＆＃34;提交＆＃34;或id =＆＃34;提交＆＃34;在形式。只需删除提交按钮的名称和ID，或更改为其他任何内容。它会起作用......经过测试......
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>
<script>
$(document).ready(function(){
$( "#myform" ).validate({
debug: true,
errorClass:'error help-inline',
validClass:'success',
errorElement:'span',
highlight: function (element, errorClass, validClass) {
$(element).parents("div.control-group").addClass(errorClass).removeClass(validClass);
},
unhighlight: function (element, errorClass, validClass) {
$(element).parents(".error").removeClass(errorClass).addClass(validClass);
},
rules: {
name: "required",
city: "required",
age: "required",
email: {
required: true,
email: true
},
phone: "required",
},
messages: {
name: "name required",
city: "city required",
age: "age required",
email: {
required: "email required",
email: "wrong format"
},
phone: "10 digit mobile"
},
submitHandler: function(form) {
alert('submitted');
console.log(form)
form.submit();
}
});
})
</script>
<!-- html code for the form is -->
<form class="common" id="myform" method="post" action="process.php">
<div class="block2">
<div class="textclass">
<input type="text" class="required " name="name" id="name" placeholder="Name*" />
</div>
</div>
<div class="block3">
<div class="textclass">
<input type="email" class="required email " name="email" id="email" placeholder="E-Mail*" required/>
</div>
</div>
<div class="block4">
<div class="textclass">
<input type="text" class="required city " name="city" id="city" placeholder="City*" required/>
</div>
</div>
<div class="block6">
<div class="textclass">
<input type="text" class="" name="age" id="age" placeholder="Enter Age*" pattern="[0-9]{2}" required/>
</div>
</div>
<div class="block8">
<div class="textclass">
<input type="text" class="required number phone" name="phone" id="phone" pattern="[0-9]{10}" placeholder="Phone No.*" required/>
</div>
</div>
<div class="submitclass">
<input type="submit" value="submit" >
</div>
</form>
答案 1 :(得分：0)
拥有id="submit"或name = "submit"不是有效表单。我只是更换了它们并检查出来。
$( "#myform" ).validate({
debug: true,
errorClass:'error help-inline',
validClass:'success',
errorElement:'span',
highlight: function (element, errorClass, validClass) {
$(element).parents("div.control-group").addClass(errorClass).removeClass(validClass);
},
unhighlight: function (element, errorClass, validClass) {
$(element).parents(".error").removeClass(errorClass).addClass(validClass);
},
rules: {
name: "required",
city: "required",
age: "required",
email: {
required: true,
email: true
},
phone: "required",
},
messages: {
name: "name required",
city: "city required",
age: "age required",
email: {
required: "email required",
email: "wrong format"
},
phone: "10 digit mobile"
},
submitHandler: function(form) {
alert('your form is WORKING NOW');
console.log(form)
form.submit();
}
}); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>
<form class="common" id="myform" method="post" action="process.php">
<div class="block2">
<div class="textclass">
<input type="text" class="required " name="name" id="name" placeholder="Name*" required />
</div>
</div>
<div class="block3">
<div class="textclass">
<input type="email" class="required email " name="email" id="email" placeholder="E-Mail*" required/>
</div>
</div>
<div class="block4">
<div class="textclass">
<input type="text" class="required city " name="city" id="city" placeholder="City*" required/>
</div>
</div>
<div class="block6">
<div class="textclass">
<input type="text" class="" name="age" id="age" placeholder="Enter Age*" pattern="[0-9]{2}" required/>
</div>
</div>
<div class="block8">
<div class="textclass">
<input type="text" class="required number phone" name="phone" id="phone" pattern="[0-9]{10}" placeholder="Phone No.*" required/>
</div>
</div>
<div class="submitclass">
<input id="submit-btn" name="submit-btn" type="submit" value="submit">
</div>
</form>