• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 315
  • Last Modified:

Configuring JQuery Validation Code

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
iamdiggnified
Asked:
iamdiggnified
  • 4
  • 3
2 Solutions
 
Erdinç Güngör ÇorbacıPHP Development Team LeaderCommented:
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
 
iamdiggnifiedAuthor Commented:
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
 
Erdinç Güngör ÇorbacıPHP Development Team LeaderCommented:
yes , exactly true ...
for further documentation you can refer to
http://docs.jquery.com/Plugins/Validation/Methods
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
iamdiggnifiedAuthor Commented:
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
 
Erdinç Güngör ÇorbacıPHP Development Team LeaderCommented:
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
 
iamdiggnifiedAuthor Commented:
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
 
iamdiggnifiedAuthor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now