Server side <form> tag prevents jQuery validate plugin validating
Question
When the submit button is clicked in this code with nothing in the name field, the validate() function should kick in and say "This field is required". This works fine, until I add the server side form tag . Once this tag is in there (and I will need it for other things on the page, the validate() function doesnt seem to run at all because the page does a postback immediately, where the validate() function prevents the form from submitting when validation fails.
The below code is the non working code. If I take out the line and the last closing form tag ( tag, it works - it validates, shows "This field is required", and successfully prevents the form from loading.
So my question is, why does this not work with the server side form tag?
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#nameForm").validate();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<form id="nameForm" method="get" action="">
<p>
<label for="cname">Name</label>
<em>*</em>
<input id="cname" name="name" size="25" class="required" minlength="2" />
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</form>
</form>
</body>
</html>
2 answers
solution1
1 2013-04-10 13:21:38
Floradu88 noted that having 2 forms is incorrect, and the below code (with one of the forms removed), now seems to work fine, thanks!
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#form1").validate();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<p>
<label for="cname">Name</label>
<em>*</em>
<input id="cname" name="name" size="25" class="required" minlength="2" />
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</form>
</body>
</html>
solution2
0 2015-07-18 20:07:28
it 's because nested form is not supported in html nested form will be ignored,you can solve it by adding empty from after you main form
you code
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#nameForm").validate();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<form></form>
<form id="nameForm" method="get" action="">
<p>
<label for="cname">Name</label>
<em>*</em>
<input id="cname" name="name" size="25" class="required" minlength="2" />
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</form>
</form>
</body>
</html>
refrence link jQuery Validation Issue with a form inside a form
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.