?
Solved

Configuring JQuery Validation Code

Posted on 2011-05-09
7
Medium Priority
?
301 Views
Last Modified: 2012-05-11
I am using jQuery to validate a form on my page. I need to add more validation code for a new form field. The new question on the form is "how many windows will you need?". I've attached the validation code for the phone number field. Can someone help me tweak this code to only allow for up to 1000 windows and accept only numbers? Thanks.
jQuery.validator.addMethod("phoneUS", function(phone_number, element) {
                phone_number = phone_number.replace(/\s+/g, "");
                return this.optional(element) || phone_number.length > 9 &&
		        phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
            }, "Please specify a valid phone number.");

Open in new window

0
Comment
Question by:iamdiggnified
  • 4
  • 3
7 Comments
 
LVL 9

Expert Comment

by:Erdinç Güngör Çorbacı
ID: 35720429
you don't need to add any new method there are already methods preconfigured for the thing you want to check.

Just add a rule  like below ;

var validator = $("#formid").validate({
        rules: {
            numberofwindows: {
                required: true,
                number : true,
                min: 1,
                max:1000
            },
//.... other rules and definitions
       }
});

0
 

Author Comment

by:iamdiggnified
ID: 35720772
erdincgc, in your example "formid" is going to be the ID# of my form and "numberofwindows" is supposed to be the ID# of the form field I want to apply that particular validation to?
0
 
LVL 9

Expert Comment

by:Erdinç Güngör Çorbacı
ID: 35720882
yes , exactly true ...
for further documentation you can refer to
http://docs.jquery.com/Plugins/Validation/Methods
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:iamdiggnified
ID: 35721119
erdincgc, I decided to put this validation script within its own script tags even though there are other <script></script> tags on the page. The attached code is what I came up with. However after implementing this, the form will still submit when letters are entered into the field. So its not working
<script type="text/javascript">
	var validator = $("#lead-form").validate({
        rules: {
            of_windows__c: {
                required: true,
                number : true,
                min: 1,
                max:1000
            }
			});
   </script>

Open in new window

0
 
LVL 9

Assisted Solution

by:Erdinç Güngör Çorbacı
Erdinç Güngör Çorbacı earned 2000 total points
ID: 35724902
Are you combining all rules or do you call any other rules with another code block. Better if you can attach a sample page (by cleaning any unsharable parts ) i can suggest you a complete solution.

If there is only one var=validator ... code block in your page the only absent piece is the success and the submitHandler definitions.

I will write an example code for validation which i'd implemented for a form in one of  my previous projects.

 
var validator = $("#form_sites_details").validate({ 
        rules: { 
            the_site_id: {
                required: true, 
                minlength: 1
            },
            the_site_name: {
                required: true, 
                minlength: 2
            },
            the_site_type: "required", 
            the_site_online_state : "required",
            the_site_debug_mode : "required",
            the_site_theme : "required",
            the_site_track_level : "required",
            the_site_product_id: { 
                required: true, 
                minlength: 1, 
            },
            t_site_products: { 
                required: true, 
                minlength: 1, 
            },             
        }, 
        messages: { 
            firstname: "Enter your firstname", 
            lastname: "Enter your lastname"
        }, 
        errorPlacement: function(error, element) { 
            if ( element.is(":radio") ) 
                error.appendTo( element.parent().prev() ); 
            else if ( element.is(":checkbox") ) 
                error.appendTo ( element.parent().prev() ); 
            else 
                error.appendTo( element.prev() ); 
        }, 
        submitHandler: function(form) { 
            alert("Form is validated!");
            form.submit(); 
        }, 
        success: function(label) { 
            label.html("&nbsp;").addClass("valid_small"); 
        } 
});

Open in new window


Please especially pay attention to the line below in code this code

form.submit();

If this line is escaped validation only returns the alert and waits. If there are any invalid form element inputs validation highlights it and places the associated error message next to the relevant tag.

you can implement your rules including the one we had discussed on to the validation function above.

If you still need assistance please send a complete page dump .

cys bb

0
 

Accepted Solution

by:
iamdiggnified earned 0 total points
ID: 35728846
erdincgc, thanks for taking the time to help me on this. Since jquery validation was already in place on my page,  I added class="number" to the input field i was trying to validate. This made the field only accept numeric numbers. So problem solved. Thanks again for all your help.
0
 

Author Closing Comment

by:iamdiggnified
ID: 35763041
erdincgc, thanks for taking the time to help me on this. Since jquery validation was already in place on my page,  I added class="number" to the input field i was trying to validate. This made the field only accept numeric numbers. So problem solved. Thanks again for all your help.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question