Hi I need submit a page after some validation is done. I never used jQuery before, any idea how to do it? Script come from this tutorial http://webcloud.se/log/Form-validation-with-jQuery-from-scratch/
<form method="post" action="/contact-process" id="demo-form">
<script>
var demoForm = $("#demo-form");
demoForm.validation();
demoForm.submit(function (e) {
$("#valid-form").remove();
if (demoForm.validate()) {
demoForm.append("<strong id='valid-form'>Form is valid!</strong>");
// Here submit the page
}
e.preventDefault();
});
</script>
asked Sep 7, 2011 at 14:02
GibboK
74.3k149 gold badges453 silver badges676 bronze badges
7 Answers 7
Since you're handling the form's submit event, you only need to call preventDefault() if it is invalid:
demoForm.submit(function(e) {
$("#valid-form").remove();
if (demoForm.validate()) {
demoForm.append("<strong id='valid-form'>Form is valid!</strong>");
} else {
e.preventDefault();
}
}
answered Sep 7, 2011 at 14:05
Frédéric Hamidi
264k42 gold badges497 silver badges486 bronze badges
Sign up to request clarification or add additional context in comments.
Comments
Change your handler to only prevent default if the form is invalid:
demoForm.submit(function (e) {
$("#valid-form").remove();
if (demoForm.validate()) {
demoForm.append("<strong id='valid-form'>Form is valid!</strong>");
}
else
e.preventDefault();
});
answered Sep 7, 2011 at 14:06
InvisibleBacon
3,23229 silver badges27 bronze badges
1 Comment
Shaggy13spe
While InvisibleBacon has answered your question correctly, it doesn't address style issues, regarding how and where you use jquery calls. Most importantly, wrapping everything in $(document).ready() so that nothing can fire that depends on a DOM element that hasn't finished loading yet. Also, if all you want to do is stop submission if the form is invalid, then you simply need an if statement that does that when the value is false, no need for if/else at all.
Try adjusting your script code to only prevent the submit if validation fails. For example the following code (since you only provided a snippet, I just created a basic page that does essentially what you want, you'll have to adjust your code as needed)
<html>
<head>
<title></title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var valid = true;
$("form").submit(function (e) {
if (!valid) {
e.preventDefault();
}
});});
</script>
</head>
<body>
<form method="post" action="anotherpage.htm">
<input type="text" value="hello"></input>
<input type="submit" value="submit"></input>
</form>
</body>
- Calling .preventDefault (side note: you can also return false) stops the submit from actually taking place. If the form is valid, it skips the if statement and continues with the submit.
- You should place your jquery code inside $(document).ready(function() {}); because you don't want anything to fire before the DOM is fully loaded.
- Generally, you should place your script tag in the HEAD element
answered Sep 7, 2011 at 14:32
Shaggy13spe
73310 silver badges22 bronze badges
Comments
Maybe you can try:
$("#valid-form").submit();
But...in your code your removing the form, so there's nothing to submit. Maybe you can use hide() instead of remove().
answered Sep 7, 2011 at 14:04
Bas Slagter
9,9419 gold badges51 silver badges81 bronze badges
4 Comments
GibboK
I get this error: Line: 42 Error: Object doesn't support this property or method source code for js here any ideas? webcloud.se/log/Form-validation-with-jQuery-from-scratch/…
Bas Slagter
Well yeah, of course that is because you removed the form first!
GibboK
strange thing, I receive an error Error: Object doesn't support this property or method but after the page can been submitted erro is in jqery.min.js
Bas Slagter
If you try to figure out which object the message is about...you should be on the roll again.
Try using
$("#valid-form").submit();
answered Sep 7, 2011 at 14:04
Michael S
4,8105 gold badges26 silver badges30 bronze badges
1 Comment
GibboK
I tried but i get an error: Object doesn't support this property or method source code for js here any ideas?
$("#valid-form").submit();
answered Sep 7, 2011 at 14:05
genesis
51.1k20 gold badges99 silver badges127 bronze badges
Comments
If form is valid just return true else return false it will stop the form to submit.
demoForm.submit(function (e) {
$("#valid-form").remove();
if (demoForm.validate()) {
demoForm.append("<strong id='valid-form'>Form is valid!</strong>");
return true;
}
return false;
});
answered Sep 7, 2011 at 14:10
ShankarSangoli
69.9k13 gold badges96 silver badges124 bronze badges
Comments
default
e.preventDefault()in an} else {after thatif.valid-form, a<form>?