One of the most recent projects I've been working on is the form validation. Click the Submit button, but I don't want him to jump to the page to submit. So after all kinds of Baidu, all kinds of stackoverflow, all kinds of hug big God leg, have the following solution:
The point is to stop the form's submit () default commit behavior, one method with return false and the other Event.preventdefault (); Both methods are possible, but they are different, depending on your actual situation to choose. What's the difference, after reading the article will tell you.
First, the code in the HTML is as follows:
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Form</title>6 </Head>7 <Body>8 <formAction= "Www.baidu.com"Method= "POST"ID= "MyForm"novalidate>Novalidate is designed to prevent HTML5 forms from performing native checksums, which only perform your own custom validation.9 <inputtype= "Name"ID= "Name"Required>Ten <inputtype= "Submit"value= "Submit"> One </form> A - <Scriptsrc= "Scripts/jquery.min.js"></Script> - <Scriptsrc= "Scripts/demo.js"></Script> the </Body> - </HTML>
JS in code as follows:
1 $ (' #myForm '). Submit (function(event) {2 if (!$ (' #name '). val ()) {3 alert (' name cannot be null '); 4 Event.preventdefault (); 5 }; 6 })When the value of the table name is empty, a prompt box pops up and stops the jump. Code Demo: Http://plnkr.co/edit/CZ9TYOMKXheCvq7fMQ7f?p=preview
Of course you can also use return FALSE to block the code as follows:
1 $ (' #myForm '). Submit (function(event) {2 if (!$ (' #name '). val ()) {3 alert (' name cannot be null '); 4 return false ; 5 }; 6 })Code Demo: Http://plnkr.co/edit/CZ9TYOMKXheCvq7fMQ7f?p=preview
If you're using a angularjs frame or something, just add Ng-controller, Ng-app, and so on to the code.
Finally say the difference between return false and Event.preventdedault (): If you want to do something else after you block the form's commit behavior, use Event.preventdefault (), such as null input Add a red border to remind the user of the same, because the code after return false will not execute. If you do not want to do anything, then there is no difference between the two, by your wayward!
Red Border Code:
1 $ (' #myForm '). Submit (function(event) {2 if (!$ (' #name '). val ()) {3 alert (' name cannot be null '); 4 Event.preventdefault (); 5 $ (' #name '). CSS (' border-color ', ' Red '); 6 }7 })Ps:event.preventDefault (); What kind of a ghost? Http://www.w3school.com.cn/jsref/event_preventdefault.asp
Look at what?! Comment Attention Ah!
How do I organize a default submission for my form? "Pro-Test effective"
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
