"JQuery" does not need the attributes of ID, name and class to traverse, judge, and verify all the table items in the form directly.

Source: Internet
Author: User
Tags border color

Although it seems to be very cool, especially in some with more than a single text box <input type= "text"/>, multi-line text box <textarea> and other pages, but encountered some need specific judgment of the page, you might as well set an ID, Directly through the ID to take, simple and convenient, do not consider traversing the problem so difficult. This approach is especially useful for pages with super-multi-text boxes, but you don't want to use the server language for what aspx,jsp,php sets n IDs. For example, using this method can improve the "JavaScript" form before the submission of the Foreground Processing Inspection trilogy (click Open link), the code will not be written so long! At the same time, this method is able to restrict the form function, do not want to online some methods, once the traversal will traverse the entire page.


I. BASIC OBJECTIVES

The following example. If the text box has an excessive number of words, or is empty, give a prompt immediately, and the border color of the text box is red and alert. Here is the ability to function on a qualifying form, regardless of whether the input box outside the form is written and does not participate in validation.



Second, HTML layout

Very simple, just want to notice, here set a div put error message. An input box that is outside the form is also set. In addition, all the input boxes in the form, the multiline text box, do not have any ID, name and class attributes, but I can still make judgments.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">


Third, jquery script

1, according to the onsubmit attribute passed the form of form for inspection

2, here is actually a bit "JavaScript" original eco-compatible IE6 picture Carousel (Click to open the link) of the paging idea. If you do not meet the required form item alarms, and the Boolean value to submit the judgment is set to false, remember to restore the required form items to their original status. Otherwise the user does not work, but the error message does not have to ignore him. The errmsg variable will be emptied every time the user clicks the Submit button.

3. Use the $ (obj). Find ("input[type= ' text ']"). The each () method iterates through all the single-line text boxes and the rest of the table items are the same. Each () parameter can be a function, and here is our judgment function. The This in this function is the one that iterates through each item.

4, Function getstrlength () is used to distinguish between English and Chinese counts, the English count of one character, Chinese is counted 2 characters.

<script>function submitpreprocessing (obj) {var isformok=true;var i=0;var j=0;var errmsg= ""; $ (obj). Find ("input[ Type= ' text '). each (function () {i++;if (Getstrlength ($ (). Val ()) ==0) {errmsg+= "+i+" line text box is empty! "; $ (this). CSS (" Border "," 2px solid #ff0000 "); isformok=false;} else if (getstrlength (this). Val ()) >10) {errmsg+= "+i+" single-line text box more than 5 words! "; $ (this). CSS (" Border "," 2px solid #ff0000 "); isformok=false;} else{$ (this). CSS ("Border", "1px solid #cccccc");}); $ (obj). Find ("textarea"). each (function () {j++;if ($ () () {*. html ()) ==0) {errmsg+= "" +j+ "the Multiline text box is empty! "; $ (this). CSS (" Border "," 2px solid #ff0000 "); isformok=false;} else if (getstrlength (this). html ()) >20) {errmsg+= "+j+" Multiline text box more than 10 words! "; $ (this). CSS (" Border "," 2px solid #ff0000 "); isformok=false;} else{$ (this). CSS ("Border", "1px solid #cccccc");}); if (!isformok) {$ ("#errorMsg"). HTML (errmsg+ "please modify! "); return false;} Else{alert ("Thank you for filling in!") "); $ (" #errorMsg "). HTML (" "); return false;}} function Getstrlength (str) {var mylen = 0;for (var i = 0; i < str.length; ++i) {if (str.charcodeat (i) > 0 && str.charcodeat (i) < +) {++mylen;} else {mylen + = 2;}} return Mylen;} </script>

"JQuery" does not need the attributes of ID, name and class to traverse, judge, and verify all the table items in the form directly.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.