Home > Developer > JavaScript
Problems encountered when using jquery. validate
This article mainly introduces jquery. A summary of the solutions to the problems encountered during the use of the validate is really an old saying, the meeting is not difficult, it is not difficult, here to record, there is a need for friends can refer.
Question 1:
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<Script src = "../js/jquery. js"> </script> <Script src = "../js/jquery. validate. js"> </script> <Script> $ (). Ready (function (){ $ ("# RegisterForm"). validate (); }); </Script>
<Form id = "registerForm" method = "get" action = ""> <Fieldset> <P> <Label for = "cusername"> User Name </label> <Input id = "cusername" name = "username" type = "text" data-rule-required = "true" data-rule-rangelength = "[2, 10]" data-msg -required = "the user name cannot be blank." data-msg-rangelength = "the user name must be 2 to 10 characters in length"> </P> <P> <Label for = "cpassword"> password </label> <Input id = "cpassword" name = "password" type = "password" data-rule-required = "true" data-rule-minlength = "6" data-msg-required = "the password cannot be blank" data-msg-minlength = "set at least six passwords"> </P> <P> <Label for = "cconfirmpassword"> Confirm Password </label> <Input id = "cconfirmpassword" name = "confirmpassword" type = "password" data-rule to = "# cpassword" data-msg-rule to = "inconsistent passwords"> </P> <P> <Label for = "cemail"> email </label> <Input id = "cemail" name = "email" data-rule-required = "true" data-rule-email = "true" data-msg-required = "email cannot be null "data-msg-email =" Incorrect email format "> </Input> </P> <P> <Label for = "chasreferee"> select a recommender </label> <Input type = "checkbox" id = "chasreferee" name = "hasreferee"> </P> <P> <Label for = "creferee"> recommender </label> <Input id = "creferee" name = "referee" data-rule-required = "# chasreferee: checked" data-msg-required = "the recommender cannot be blank"> </Input> </P> <P> <Input type = "submit" value = "submit"> </P> </Fieldset> </Form> |
After reading the previous articles written by others, it seems that jquery is dependent. metadata. the js library is then written in the form of class = "required email". It seems a bit messy to write, and the class itself is rendered, it seems a bit messy to be attached with various validation rules. Fortunately, in the new version, there is a new writing method that does not rely on the above js library, it is simpler, more intuitive, and more powerful to redefine data-rule-validation rules and data-msg-prompts. The above test passed
My version of jquery. validate1.13.js
In this way, the message in the control does not take effect, and the following error occurs: Cannot read property 'call' of undefined garden contains many jquery. the validate article mentioned that it can be used. I think the version is outdated and I didn't try it out. In addition, I am also drunk when I unmount the verification class. The following test error is reported!
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <Html xmlns = "http://www.w3.org/1999/xhtml"> <Head> <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/> <Title> untitled document </title> <Script type = "text/javascript" src = "jquery. min. js"> </script>
<! -- <Script type = "text/javascript" src = "jquery. validate. js"> </script> --> <Script type = "text/javascript" src = "jquery. validate1.13.js"> </script> <Script type = "text/javascript" src = "jquery. validate. message_cn.js"> </script> <Script type = "text/javascript" src = "jquery. metadata. js"> </script> <Script type = "text/javascript"> $ (Function (){ $. Metadata. setType ("attr", "validate "); $ ("# SignupForm"). validate (); // $ ("# SignupForm"). validate ({meta: "validate "}); // $ ("# CommentForm"). validate (); })
</Script> </Head>
<Body> <Form id = "signupForm" method = "get" action = ""> <P>
<Input id = "email" name = "email" validate = "{required: true, email: true, messages: {required: 'input email address', email: 'The email address you entered is not valid '} "/> </P>
<P> <Input class = "submit" type = "submit" value = "Submit"/> </P> </Form>
</Body> </Html> |
Problem 2: no message is displayed after jQuery_validate is configured.
Cause: submit () times.
Example:
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<% @ Page language = "java" contentType = "text/html; charset = UTF-8" pageEncoding = "UTF-8" %> <% @ Taglib prefix = "s" uri = "/struts-tags" %> <Html> <Head> <Title> jquery test </title> <Script src = "js/jquery. js"> </script> <Script src = "js/jquery. validate. js"> </script> <Script src = "js/jquery. metadata. js"> </script> <Script src = "js/messages_zh.js"> </script>
<Script> $ (Document). ready (function (){
$ ("# CommentForm"). validate ({ // Debug: true }); }); </Script> <Script type = "text/javascript"> Function register (){ Document. forms [0]. action = 'register/addUser. action '; // Document. forms [0]. submit (); } </Script> </Head> <Body> <Form id = "commentForm" method = "post"> <Table style = "width: 100%"> <Tr> <Td> user name: </td> <Td> <input type = "text" name = "username" id = "username" maxlength = "10" Class = "{required: true, minlength: 6, maxlength: 12}"/> </td> </Tr> <Tr> <Td> password: </td> <Td> <input type = "password" name = "password" id = "password" maxlength = "15" Class = "required"/> </td> </Tr> <Tr> <Td> </td> <Td> <input type = "submit" value = "Register" onclick = "register ();"> </td> </Tr> </Table> </Form> </Body> </Html> |
There is a commit after jQuery verification, and I submitted it again in register (). After commenting out [document. forms [0]. submit ();], the problem is solved.
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
