I&#39;m using the [jQuery Validation Plugin][1] on my form. On my form I have a &#39;Telephone&#39; field and a &#39;Mobile No.&#39; field.

How would I go about making it so the user has to fill in one of them, but it can be either field?

  [1]: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

jQuery Validation - Two fields, only required to fill in one

This is the model with it&#39;s validation:

    [MetadataType(typeof(TagValidation))]
    public partial class Tag
    {
    }
    
    public class TagValidation
    {
            [Editable(false)]
            [HiddenInput(DisplayValue = false)]
            public int TagId { get; set; }
    
            [Required]
            [StringLength(20)]
            [DataType(DataType.Text)]
            public string Name { get; set; }
    	//...
    }
Here is the view:

        &lt;h2&gt;Create&lt;/h2&gt;
    
    &lt;script src=&quot;@Url.Content(&quot;~/Scripts/jquery.validate.min.js&quot;)&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;@Url.Content(&quot;~/Scripts/jquery.validate.unobtrusive.min.js&quot;)&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
    
    @using (Html.BeginForm()) {
        @Html.ValidationSummary(true)
        &lt;fieldset&gt;
            &lt;legend&gt;Tag&lt;/legend&gt;
    
            &lt;div&gt;@Html.EditorForModel()&lt;/div&gt;
    
            &lt;p&gt;
                &lt;input type=&quot;submit&quot; value=&quot;Create&quot; /&gt;
            &lt;/p&gt;
        &lt;/fieldset&gt;
    }
    
    &lt;div&gt;
        @Html.ActionLink(&quot;Back to List&quot;, &quot;Index&quot;)
    &lt;/div&gt;

And here is what get&#39;s renderd:

    &lt;form action=&quot;/Tag/Create&quot; method=&quot;post&quot;&gt;
        &lt;fieldset&gt;
            &lt;legend&gt;Tag&lt;/legend&gt;
            &lt;div&gt;&lt;input data-val=&quot;true&quot; data-val-number=&quot;The field TagId must be a number.&quot; data-val-required=&quot;The TagId field is required.&quot; id=&quot;TagId&quot; name=&quot;TagId&quot; type=&quot;hidden&quot; value=&quot;&quot; /&gt;
                
            &lt;div class=&quot;editor-label&quot;&gt;&lt;label for=&quot;Name&quot;&gt;Name&lt;/label&gt;&lt;/div&gt;
            &lt;div class=&quot;editor-field&quot;&gt;&lt;input class=&quot;text-box single-line&quot; data-val=&quot;true&quot; data-val-length=&quot;The field Name must be a string with a maximum length of 20.&quot; data-val-length-max=&quot;20&quot; data-val-required=&quot;The Name field is required.&quot; id=&quot;Name&quot; name=&quot;Name&quot; type=&quot;text&quot; value=&quot;&quot; /&gt; &lt;span class=&quot;field-validation-valid&quot; data-valmsg-for=&quot;Name&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;&lt;/div&gt;            
        ...
        &lt;/fieldset&gt;
    &lt;/form&gt;

The problem is that TagId validation gets generated althoug thare is no Required attribute set on TagId property. Because of that I can&#39;t even pass the client-side validation in order to create new Tag in db.
What am I missing?

Unrequired property keeps getting data-val-required attribute

My script throw errors:

&gt; TypeError: jQuery.validator is undefined additional-methods.js:20
TypeError: $(...).validate is not a function index.php:115

Probably, I have mistake in jQuery code.

    &lt;head&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery-1.10.2.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery.form.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;http://jquery.bassistance.de/validate/additional-methods.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
    			&lt;form id=&quot;registerForm&quot; method=&quot;post&quot; action=&quot;logrej.php&quot;&gt;
    			&lt;input name=&quot;login&quot; type=&quot;text&quot;/&gt;
    			&lt;input name=&quot;nick&quot; type=&quot;text&quot;/&gt;
    			&lt;input type=&quot;password&quot; id=&quot;passw&quot; name=&quot;password&quot;/&gt;
    			&lt;input type=&quot;password&quot; name=&quot;retype&quot; /&gt;
    			&lt;input type=&quot;submit&quot; value=&quot;Zarejestruj!&quot; /&gt;
    			&lt;/form&gt;
    			&lt;script&gt;
    		
    				$(&quot;#registerForm&quot;).validate({
    					rules: {
    						login: {
    							required:true,
    							rangelenght: [4,20],
    							remote:&quot;look.php&quot;
    						},
    						nick : {
    							required:true,
    							rangelenght:[4,20],
    							remote:&quot;look.php&quot;
    						},
    						password: {
    							required:true,
    							rangelenght:[4.20]
    						},
    						retype: {
    							required:true,
    							equalTo:&quot;#passw&quot;
    						}
    					},
    					messages:{
    						login:{
    							required:&quot;To pole jest wymagane!&quot;
    						}
    					}
    				})
    			
    			&lt;/script&gt;

Jquery validation plugin - TypeError: $(...).validate is not a function

I read your reply regarding the jQuery validator where you outline a method to check a username against a value in a database.

Ive tried implementing this method but no matter what is returned from the PHP file I always get the message that the username is already taken.

Here is ths custom method...

    $.validator.addMethod(&quot;uniqueUserName&quot;, function(value, element) {
      $.ajax({
          type: &quot;POST&quot;,
           url: &quot;php/get_save_status.php&quot;,
          data: &quot;checkUsername=&quot;+value,
          dataType:&quot;html&quot;,
       success: function(msg)
       {
          // if the user exists, it returns a string &quot;true&quot;
          if(msg == &quot;true&quot;)
             return false;  // already exists
          return true;      // username is free to use
       }
     })}, &quot;Username is Already Taken&quot;);

And here is the validate code...

    username: {
        required: true,
        uniqueUserName: true
    },

Is there a specific way i am supposed to return the message from php.

Thanks

A
   

jQuery validator and a custom rule that uses AJAX

I am using MVC to create forms that are generated at runtime. For validation, I am trying my hand at the jQuery validation library which is very convenient to use. I have the validation expression of each field in the *cdata* attribute of the tag

    &lt;input type=&quot;text&quot; name=&quot;xyz&quot; id=&quot;xyz&quot; class=&quot;defaultTextBox&quot;
      cdata=&quot;{validate:{required:true, decimal:true, messages:
              {required:&#39;Please enter an decimal value&#39;, 
               decimal:&#39;Please enter a valid decimal&#39;}}}&quot;&gt;

This works beautifully. Now one more requirement I have is that some fields are being shown and hidden according to the logic on the page and I need to disable the validation on the hidden fields such that they do not interfere with the form submission. Just toggling the required:true to false and back to true should be enough. Only i do not know how.

Anyone has any experience with that?

jQuery disable rule validation on a single field

I&#39;m trying to use the simplest possible scenario using a date picker in different browsers. I suspect I&#39;m doing something very simple the wrong way but after lots of searching around I still haven&#39;t found a solution. Below is some sample code that represents what I&#39;m attempting.

If I use Chrome (v12.0.742.122) and pick a date from the picker like 13/08/2011 the jQuery validation logic will not allow the page to submit even though I&#39;ve explicitly specified the format as &#39;dd/mm/yy&#39;. 

If I change the format to &#39;dd/M/yy&#39; and choose a date like 13/Aug/2011 it works in Chrome but then won&#39;t submit for me in IE (v8.0.7600.16385). In FireFox (v3.6.18) both formats work.

What validation script do I need to be able to support date formats of &#39;dd/mm/yy&#39; in Chrome?

	&lt;html&gt;
	 &lt;head&gt;
	  &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;jquery-ui.css&quot; /&gt;
	  &lt;script type=&quot;text/javascript&quot; src=&quot;jquery-1.4.4.js&quot;&gt;&lt;/script&gt;
	  &lt;script type=&quot;text/javascript&quot; src=&quot;jquery.validate.js&quot;&gt;&lt;/script&gt;
	  &lt;script type=&quot;text/javascript&quot; src=&quot;jquery.validate.unobtrusive.js&quot;&gt;&lt;/script&gt;
	  &lt;script type=&quot;text/javascript&quot; src=&quot;jquery-ui.js&quot;&gt;&lt;/script&gt;
	  &lt;script type=&quot;text/javascript&quot;&gt;
	      $(document).ready(function () {
		$(&#39;.date&#39;).datepicker({ dateFormat: &#39;dd/mm/yy&#39; });
                $.validator.addMethod(&quot;dateRule&quot;, function(value, element) {
		  return true;
		},
		&quot;Error message&quot;);
	      });
	  &lt;/script&gt;
	 &lt;/head&gt;
	 &lt;body&gt;
		&lt;form&gt;
			Date: &lt;input type=&quot;text&quot; name=&quot;myDate&quot; class=&quot;date dateRule&quot; /&gt;
			&lt;input type=&quot;submit&quot; /&gt;
		&lt;/form&gt;
	 &lt;/body&gt;
	&lt;/html&gt;

Unobtrusive validation in Chrome won&#39;t validate with dd/mm/yyyy

There is [`focusInvalid`][1] option, which is `true` by default. But it works only when form submission happens. If I validate the form with [`valid`][2] method, then it doesn&#39;t work. So the question is how to focus invalid field when `valid` is used?

Please see [this demo][3] to see the difference. Just press buttons there.


  [1]: http://docs.jquery.com/Plugins/Validation/validate#toptions
  [2]: http://docs.jquery.com/Plugins/Validation/valid
  [3]: http://jsbin.com/ayupob

How to focus invalid fields with jQuery validate?

How would I use the JQuery Validate plugin to have one error message for say 3 fields. For example 3 dob fields. By default I will get 3 error messages if all 3 fields are left blank. I only want one error linked to 3 fields. If any are blank the error comes up. 

JQuery Validate multiple fields with one error

I&#39;m using jQuery Validate, but I really don&#39;t want to have any error messages whatsoever. Rather, I need to have red boxes around offending inputs/selects/etc. These red boxes were a piece of cake to add, but I still cannot remove error messages themselves. How do I disable them altogether?

jQuery Validate - Hide display validation error messages / show custom errors

I have a simple page with a form and a button outside the form. I am trying to validate the form on the button click.
I have added the rules for validation of the form on the document.onready function. However the form is not getting validated.  
    
HTML:-

    &lt;html&gt;
    &lt;head&gt;
       &lt;script src=&quot;lib/jquery1.5.2.js&quot;&gt;&lt;/script&gt;
       &lt;script src=&quot;lib/jquery.validate.js&quot;&gt;&lt;/script&gt;
       &lt;script src=&quot;lib/myjs.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
    
    &lt;form id=&quot;form1&quot; name=&quot;form1&quot;&gt; 
         Field 1: &lt;input id=&quot;field1&quot; type=&quot;text&quot; class=&quot;required&quot;&gt;
    &lt;/form&gt;
    
    &lt;div&gt;
        &lt;input id=&quot;btn&quot; type=&quot;button&quot; value=&quot;Validate&quot;&gt;
    &lt;/div&gt;
    
    &lt;/body&gt;
    &lt;/html&gt;

JS:-
 

    $(document).ready(function(){
     
    $(&quot;#form1&quot;).validate({
       rules: {
         field1: &quot;required&quot;
       },
       messages: {
         field1: &quot;Please specify your name&quot;
         
       }
    })
    
    $(&#39;#btn&#39;).click(function() {
     $(&quot;#form1&quot;).validate();  // This is not working and is not validating the form
    });
    
    });


Any idea what&#39;s wrong?

jQuery form validation on button click

I have a dynamically generated form with input fields with the same name (for example: &quot;map&quot;). I do not have the option of changing the field names or generating unique field names because the form handler code (Perl/CGI) is designed to handle an array of input values (in this case `@map`). 

How can I use the JQuery [Validate Plugin][1] to validate a form in such a situation? Specifically I would want exactly one element of the submitted array to have a certain fixed value. I am currently using a custom event handler that creates a JSON object with `serializeArray()` and then traverses it to ensure that the condition is met. But since I have used the Validate Plugin in the rest of the application, I was wondering if such a case may be handled using the same plugin here too.

Thank you for your attention.


  [1]: http://docs.jquery.com/Plugins/Validation &quot;Validation&quot;

Using JQuery Validate Plugin to validate multiple form fields with identical names

In the code shown below, how to get the values of multiselect box in function `val()` using jQuery or pure JavaScript?

    &lt;script&gt;
        function val() {
            //Get values of mutliselect drop down box
        }
    
        $(document).ready(function () {
            var flag = 0;
            $(&#39;#emp&#39;).change(function () {
                var sub = $(&quot;OPTION:selected&quot;, this).val()
                if (flag == 1) $(&#39;#new_row&#39;).remove();
                $(&#39;#topics&#39;).val(&#39;&#39;);
                var html = &#39;&lt;tr id=&quot;new_row&quot; class=&quot;new_row&quot;&gt;&lt;td&gt;Topics:&lt;/td&gt;&lt;td&gt;  &lt;select    id=&quot;topic_l&quot; name=&quot;topic_l&quot; class=&quot;topic_l&quot; multiple=&quot;multiple&quot;&gt;&#39;;
                var idarr = new Array();
                var valarr = new Array(); { %
                    for top in dict.tops %
                }
                idarr.push(&#39;{{top.is}}&#39;);
                valarr.push(&#39;{{pic.ele}}&#39;); { % endfor %
                }
                for (var i = 0; i &lt; idarr.length; i++) {
                    if (sub == idarr[i]) {
                        html += &#39;&lt;option value=&quot;&#39; + idarr[i] + &#39;&quot; &gt;&#39; + valarr[i] + &#39;&lt;/option&gt;&#39;;
                    }
                }
                html += &#39;&lt;/select&gt;&lt;/p&gt;&lt;/td&gt;&lt;/tr&gt;&#39;;
                $(&#39;#tops&#39;).append(html);
                flag = 1;
            });
        });
    &lt;/script&gt;
    Emp:&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
    &lt;select id=&quot;emp&quot; name=&quot;emp&quot;&gt;
        &lt;option value=&quot;&quot;&gt;&lt;/option&gt;
        &lt;option value=&quot;1&quot;&gt;1&lt;/option&gt;
    &lt;/select&gt;
    
    &lt;div name=&quot;tops&quot; id=&quot;tops&quot;&gt;&lt;/div&gt;
    
    &lt;input type=&quot;submit&quot; value=&quot;Create Template&quot; id=&quot;create&quot; onclick=&quot;javascript:var ret=val();return ret;&quot;&gt;



Get value of multiselect box using jQuery or pure JS

I have a single form that, depending on which radio button is clicked (Login or Signup), displays either:

 - email address
 - password

or:

 - name
 - age
 - email address
 - password

Clicking on the radio button toggles the visibility of the Login/Signup fields:

    &lt;form id=&quot;myForm&quot;&gt;
        &lt;input name=&quot;userAction&quot; type=&quot;radio&quot; value=&quot;login&quot; checked=&quot;checked&quot;&gt;Login&lt;/input&gt;
        &lt;br /&gt;
        &lt;input name=&quot;userAction&quot; type=&quot;radio&quot; value=&quot;signup&quot;&gt;Sign Up&lt;/input&gt;
    
        &lt;div id=&quot;loginFields&quot; style=&quot;display:none&quot;&gt;
            &lt;!-- Login fields (email address and password) --&gt;
        &lt;/div&gt;
        
        &lt;div id=&quot;signupFields&quot; style=&quot;display:none&quot;&gt;
            &lt;!-- Signup fields (name, age, email address, password) --&gt;
        &lt;/div&gt;
    &lt;/form&gt;

I&#39;m using the [jQuery Validation plug-in][1], and I&#39;d like to use the following rules:

    var signupRules = {
        emailAddressTextBox:
        {
            required: true,
            email: true 
        },
        passwordTextBox:
        {
            required: true,
            minlength: 6,
            maxlength: 24,
            passwordValidationRule: true // custom regex added with $.validator.addMethod()
        }
    };
    
    var loginRules = {
        nameTextBox:
        {
            required: true,
            maxlength: 50
        },
        loginEmailAddressTextBox:
        {
            required: true,
            email: true 
        },
        loginPasswordTextBox:
        {
            required: true,
            minlength: 6,
            maxlength: 24,
            passwordValidationRule: true // custom regex added with $.validator.addMethod()
        },
        loginPasswordAgainTextBox:
        {
            required: true,
            minlength: 6,
            maxlength: 24,
            equalTo: &quot;#loginPasswordTextBox&quot;
            passwordValidationRule: true // custom regex added with $.validator.addMethod()        
        }
    };

How can I add the correct validation rule dynamically based on:

       $(&quot;input[name=&#39;userAction&#39;]&quot;).change(function() {
            if ($(&quot;input[name=&#39;userAction&#39;]:checked&quot; ).val() === &quot;login&quot;) {
                // use loginRules
            } else {
                // use signupRules
            }
        });


I&#39;ve tried the following:

    $(&quot;#myForm&quot;).validate({
        rules: ($(&quot;input[name=&#39;userAction&#39;]:checked&quot; ).val() === &quot;login&quot;) ? loginRules : signupRules;
    });
    
But since my Login fields are the default displayed, its validations work, but the Signup scenario doesn&#39;t; it wants to validate Login fields for some reason.  Am I missing something?

  [1]: http://docs.jquery.com/Plugins/validation


jQuery Validation: Changing Rules Dynamically

I&#39;m validating a form using the new unobtrusive validation features in ASP.NET MVC 3.

So there is no code that I have written to setup jQuery validate to start validating my form.  Its all done by loading the jQuery.validate.unobtrusive.js library.

Unfortunately I need to whack in a &#39;are you sure?&#39; message box when the form is valid but before submitting.  With jQuery validate you would add the option handleSubmit when initialising like so:

    $(&quot;#my_form&quot;).validate({
      rules: {
        field1: &quot;required&quot;,
        field1: {email: true },
        field2: &quot;required&quot;
      },
      submitHandler: function(form) {
         if(confirm(&#39;Are you sure?&#39;)) {
           form.submit();
         }
      }
    });

But you don&#39;t need to initialise when using the unobtrusive library.

Any ideas where/how I can add a submit handler in that case?

Thx

How to add a &#39;submitHandler&#39; function when using jQuery Unobtrusive Validation?

JavaScript bit:

    $(document).ready(function()
		{
				$(&#39;#form&#39;).submit(function(e)
				{     

					e.preventDefault();
					var $form = $(this);

					// check if the input is valid
					if(! $form.valid()) return false;
						$.ajax(
						{
						type:&#39;POST&#39;,
						url:&#39;add.php&#39;,
						data:$(&#39;#form&#39;).serialize(),
						success:function(response)
						{
							$(&quot;#answers&quot;).html(response);
						}
					});		
					
				})
		});

HTML bit:

        &lt;input type=&quot;text&quot; name=&quot;answer[1]&quot; class=&quot;required&quot; /&gt;
        &lt;input type=&quot;text&quot; name=&quot;answer[2]&quot; class=&quot;required&quot; /&gt;

So this is the code I am trying to use. The idea is to get all my inputs validated before I send my form with Ajax. I&#39;ve tried numerous versions of this now but every time I end up with submitting even though the form is not entirely filled out. All my inputs are of the &quot;required&quot; class. Can anyone see what I am doing wrong?

Also, I depend on class-based requirements as my input names are generated with php so I can never be sure what name[id] or input types I get.

I show/hide questions as I go through it in &quot;pages&quot;.

    &lt;input type=&quot;button&quot; id=&quot;next&quot; onClick=&quot;toggleVisibility(&#39;form3&#39;)&quot; class=&quot;next-btn&quot;/&gt;


JS:

    function toggleVisibility(newSection) 
			{
				$(&quot;.section&quot;).not(&quot;#&quot; + newSection).hide();
				$(&quot;#&quot; + newSection).show();
			} 

jQuery Form Validation before Ajax submit

This looks very simply, but I can&#39;t figure it out. I&#39;m using the jquery validate plugin. I&#39;m trying to validate `&lt;input name=first&gt;` and `&lt;input name=second&gt;` to output the error messages into:

    &lt;span id=&quot;errNm2&quot;&gt;&lt;/span&gt; &lt;span id=&quot;errNm1&quot;&gt;&lt;/span&gt;

I already started writing the errorPlacement: which is where you customize your error message location. 

How can I put the errors message in those `&lt;span&gt;`?

&lt;!-- language: lang-js --&gt;

    $(document).ready(function () {
        $(&#39;#form&#39;).validate({
            errorPlacement: function(error, element) {
                error.append($(&#39;.errorTxt span&#39;));
            },
            rules,
    });

&lt;!-- language: lang-html --&gt;
              
    &lt;input type=&quot;text&quot; name=&quot;first&quot;/&gt;
    &lt;input type=&quot;text&quot; name=&quot;second&quot;/&gt;

    &lt;div class=&quot;errorTxt&quot;&gt;
       &lt;span id=&quot;errNm2&quot;&gt;&lt;/span&gt;
       &lt;span id=&quot;errNm1&quot;&gt;&lt;/span&gt;
    &lt;/div&gt;

Jquery Validate custom error message location

I am using the **[jQuery][1] validation plugin**. Great stuff! I want to migrate my existing ASP.NET solution to use jQuery instead of the ASP.NET validators. I am missing a replacement for the **regular expression** validator. I want to be able to do something like this:

    $(&quot;Textbox&quot;).rules(&quot;add&quot;, { regularExpression: &quot;^[a-zA-Z&#39;.\s]{1,40}$&quot; })

How do I **add a custom rule** to achieve this?

  [1]: http://en.wikipedia.org/wiki/JQuery


jQuery validate: How to add a rule for regular expression validation?

In the new version of jQuery validation plugin 1.9 by default [validation of hidden fields ignored][1]. I&#39;m using CKEditor for textarea input field and it hides the field and replace it with iframe. The field is there, but validation disabled for hidden fields. With validation plugin version 1.8.1 everything works as expected.

So my question is how to enable validation for hidden fields with v1.9 validation plugin.

This setting doesn&#39;t work:  

    $.validator.setDefaults({ ignore: &#39;&#39; });


  [1]: http://bassistance.de/2011/10/07/release-validation-plugin-1-9-0/

jQuery Validate - Enable validation for hidden fields

I am using the jQuery validation plugin for client side validation.
Function `editUser()` is called on click of &#39;Edit User&#39; button, which displays error messages.

But I want to clear error messages on my form, when I click on &#39;Clear&#39; button, that calls a separate function `clearUser()`.

    function clearUser() {
        // Need to clear previous errors here
    }

    function editUser(){
        var validator = $(&quot;#editUserForm&quot;).validate({
            rules: {
                userName: &quot;required&quot;
            },
            errorElement: &quot;span&quot;,
            messages: {
                userName: errorMessages.E2
            }
        });

        if(validator.form()){
            // Form submission code
        }
    }


How to clear jQuery validation error messages?

I have a form with multiple fields that I&#39;m validating (some with methods added for custom validation) with J&#246;rn Zaeffere&#39;s excellent jQuery Validation plugin. How do you circumvent validation with specified submit controls (in other words, fire validation with some submit inputs, but do not fire validation with others)? This would be similar to ValidationGroups with standard ASP.NET validator controls.

My situation:

It&#39;s with ASP.NET WebForms, but you can ignore that if you wish. However, I am using the validation more as a &quot;recommendation&quot;: in other words, when the form is submitted, validation fires but instead of a &quot;required&quot; message displaying, a &quot;recommendation&quot; shows that says something along the line of &quot;you missed the following fields.... do you wish to proceed anyways?&quot; At that point in the error container there&#39;s another submit button now visible that can be pressed which would ignore the validation and submit anyways. How to circumvent the forms .validate() for this button control and still post?

The Buy and Sell a House sample at http://jquery.bassistance.de/validate/demo/multipart/ allows for this in order to hit the previous links, but it does so through creating custom methods and adding it to the validator. I would prefer to not have to create custom methods duplicating functionality already in the validation plugin.

The following is a shortened version of the immediately applicable script that I&#39;ve got right now:

    var container = $(&quot;#&lt;%= Form.ClientID %&gt; div.validationSuggestion&quot;);
            
    $(&#39;#&lt;%= Form.ClientID %&gt;&#39;).validate({          
        errorContainer: container,
        errorLabelContainer: $(&quot;ul&quot;,container),
        rules: {
            &lt;%= YesNo.UniqueID %&gt;: { required: true },
            &lt;%= ShortText.UniqueID %&gt;: { required: true } // etc.

        },
        messages: {
            &lt;%= YesNo.UniqueID %&gt;: &#39;A message.&#39;,
            &lt;%= ShortText.UniqueID %&gt;: &#39;Another message.&#39; // etc.
        },
        highlight: function(element, errorClass) {
            $(element).addClass(errorClass);
            $(element.form).find(&quot;label[for=&quot; + element.id + &quot;]&quot;).addClass(errorClass);
            $(element.form).find(&quot;label[for=&quot; + element.id + &quot;]&quot;).removeClass(&quot;valid&quot;);
        },
        unhighlight: function(element, errorClass) {
            $(element).removeClass(errorClass);
            $(element.form).find(&quot;label[for=&quot; + element.id + &quot;]&quot;).removeClass(errorClass);
            $(element.form).find(&quot;label[for=&quot; + element.id + &quot;]&quot;).addClass(&quot;valid&quot;);
        },
        wrapper: &#39;li&#39;
    }); 

jQuery Validation plugin: disable validation for specified submit buttons

I am trying to validate html select element using jQuery Validate plugin. I set &quot;required&quot; rule to true but it always passes validation because zero index is chosed by default. Is there any way to define empty value that is used by required rule?

UPD. Example. Imagine we have the following html control:

    &lt;select&gt;
      &lt;option value=&quot;default&quot;&gt;Choose...&lt;/option&gt;
      &lt;option value=&quot;1&quot;&gt;1&lt;/option&gt;
      &lt;option value=&quot;2&quot;&gt;2&lt;/option&gt;
    &lt;/select&gt;

I want Validation plugin to use &quot;default&quot; value as empty.

jQuery Validate Required Select

I am trying to add validation to my form with jQuery Validation Plugin, but I&#39;m having a problem where the plugin puts the error messages when I&#39;m using input groups.

![the problem][1]

    $(&#39;form&#39;).validate({
        rules: {
            firstname: {
                minlength: 3,
                maxlength: 15,
                required: true
            },
            lastname: {
                minlength: 3,
                maxlength: 15,
                required: true
            }
        },
        highlight: function(element) {
            $(element).closest(&#39;.form-group&#39;).addClass(&#39;has-error&#39;);
        },
        unhighlight: function(element) {
            $(element).closest(&#39;.form-group&#39;).removeClass(&#39;has-error&#39;);
        }
    });

**My code:** http://jsfiddle.net/hTPY7/4/


  [1]: http://i.stack.imgur.com/DL2hU.png


Bootstrap with jQuery Validation Plugin

I want to manually trigger validation including showing error messages with [jQuery Validate][1].

The scenario I am trying to accomplish is a form like this:

    &lt;form&gt;
     &lt;input id=i1&gt; &lt;button id=b1&gt;
     &lt;input id=i2&gt; &lt;button id=b2&gt;
    &lt;/form&gt;

When clicking `b1`, only `i1` should be validated. hen clicking `b2`, only `i2` should be validated. However all fields must be posted. How can I do this? I thought about handling the click event for `b1/b2` and manually validating a part of the form.


  [1]: http://docs.jquery.com/Plugins/Validation

How to manually trigger validation with jQuery validate?

How do I check/validate in jQuery whether end date [textbox] is greater than start date [textbox]?

Validate that end date is greater than start date with jQuery

I have a form with a couple of buttons and I&#39;m using jQuery Validation Plugin from http://jquery.bassistance.de/validate/. I just want to know if there is any way I can check if the form is considered in valid state by jquery validation plugin from anywhere in my javascript code.

how to check if a form is valid programmatically using jQuery Validation Plugin

I am working with `ASP.Net MVC3`, the easier way to use the client validation would be enabling the `jquery.validate.unobtrusive`. Everything works fine, for stuff that&#39;s right from server. 

But when I try to inject some new &#39;inputs&#39; with javascript, and I knew that I need to call `$.validator.unobtrusive.parse()` to rebind the validations. But still, all those dynamic injected fields are not functioning. 

Even worse, I try to manually bind using `jquery.validate` and it is not working either. Any thoughts?

jquery.validate.unobtrusive not working with dynamic injected elements

I&#39;m using the excellent jQuery [Validate Plugin][1] to validate some forms. On one form, I need to ensure that the user fills in at least one of a group of fields. I think I&#39;ve got a pretty good solution, and wanted to share it.  **Please suggest any improvements you can think of.**

Finding no built-in way to do this, I searched and found [Rebecca Murphey&#39;s custom validation method][2], which was very helpful. 

I improved this in three ways:

1. To let you pass in a selector for the group of fields
2. To let you specify how many of that group must be filled for validation to pass
3. To show all inputs in the group as passing validation as soon as one of them passes 
validation. (See shout-out to [Nick Craver][3] at end.)

So you can say **&quot;at least X inputs that match selector Y must be filled.&quot;**

The end result, with markup like this:
   
    &lt;input class=&quot;productinfo&quot; name=&quot;partnumber&quot;&gt;
    &lt;input class=&quot;productinfo&quot; name=&quot;description&quot;&gt;

...is a group of rules like this:

    // Both these inputs input will validate if 
    // at least 1 input with class &#39;productinfo&#39; is filled
    partnumber: {
       require_from_group: [1,&quot;.productinfo&quot;]
      }
    description: {
       require_from_group: [1,&quot;.productinfo&quot;]
    }

    
Item #3 assumes that you&#39;re adding a class of `.checked` to your error messages upon successful validation. You can do this as follows, [as demonstrated here][4].

    success: function(label) {  
            label.html(&quot; &quot;).addClass(&quot;checked&quot;); 
    }

As in the demo linked above, I use CSS to give each `span.error` an X image as its background, unless it has the class `.checked`, in which case it gets a check mark image.

Here&#39;s my code so far: 

    jQuery.validator.addMethod(&quot;require_from_group&quot;, function(value, element, options) {
        var numberRequired = options[0];
        var selector = options[1];
        //Look for our selector within the parent form
        var validOrNot = $(selector, element.form).filter(function() {
             // Each field is kept if it has a value
             return $(this).val();
             // Set to true if there are enough, else to false
          }).length &gt;= numberRequired;
    
        // The elegent part - this element needs to check the others that match the
        // selector, but we don&#39;t want to set off a feedback loop where each element
        // has to check each other element. It would be like:
        // Element 1: &quot;I might be valid if you&#39;re valid. Are you?&quot;
        // Element 2: &quot;Let&#39;s see. I might be valid if YOU&#39;RE valid. Are you?&quot;
        // Element 1: &quot;Let&#39;s see. I might be valid if YOU&#39;RE valid. Are you?&quot;
        // ...etc, until we get a &quot;too much recursion&quot; error.
        //
        // So instead we
        //  1) Flag all matching elements as &#39;currently being validated&#39;
        //  using jQuery&#39;s .data()
        //  2) Re-run validation on each of them. Since the others are now
        //     flagged as being in the process, they will skip this section,
        //     and therefore won&#39;t turn around and validate everything else
        //  3) Once that&#39;s done, we remove the &#39;currently being validated&#39; flag
        //     from all the elements
        if(!$(element).data(&#39;being_validated&#39;)) {
        var fields = $(selector, element.form);
        fields.data(&#39;being_validated&#39;, true);
        // .valid() means &quot;validate using all applicable rules&quot; (which 
        // includes this one)
        fields.valid();
        fields.data(&#39;being_validated&#39;, false);
        }
        return validOrNot;
        // {0} below is the 0th item in the options field
        }, jQuery.format(&quot;Please fill out at least {0} of these fields.&quot;));

Hooray!

## Shout out

Now for that shout-out - originally, my code just blindly hid the error messages on the other matching fields instead of re-validating them, which meant that if there was another problem (like &#39;only numbers are allowed and you entered letters&#39;), it got hidden until the user tried to submit. This was because I didn&#39;t know how to avoid the feedback loop mentioned in the comments above. I knew there must be a way, so [I asked a question][5], and [Nick Craver][6] enlightened me. Thanks, Nick!

## Question Solved

This was originally a &quot;let me share this and see if anybody can suggest improvements&quot; kind of question. While I&#39;d still welcome feedback, I think it&#39;s pretty complete at this point. (It could be shorter, but I want it to be easy to read and not necessarily concise.) So just enjoy!

# Update - now part of jQuery Validation

This was [officially added to jQuery Validation][7] on 4/3/2012.

  [1]: http://docs.jquery.com/Plugins/Validation
  [2]: http://rmurphey.com/blog/2009/04/15/jquery-validation-indicate-that-at-least-one-element-in-a-group-is-required/
  [3]: https://stackoverflow.com/users/13249/nick-craver
  [4]: http://jquery.bassistance.de/validate/demo/milk/
  [5]: https://stackoverflow.com/questions/1378472/jquery-validate-can-i-re-validate-a-group-of-fields-after-changing-one
  [6]: https://stackoverflow.com/users/13249/nick-craver
  [7]: https://github.com/jzaefferer/jquery-validation/commit/78a739f7c574c80547dfecd70b46a362efc8e8a7

jQuery Validate - require at least one field in a group to be filled

I&#39;ve got a form that can optionally be pre-populated via facebook connect.  Once a user connects, their name and email are automatically filled in.  The problem is that this doesn&#39;t trigger the remote validation to check if the email already exists. 

Is there a way I could call the validation on that field alone?  Something like:

`$(&#39;#email-field-only&#39;).validate()`

would be idea.  Searched through the docs with no luck.

jQuery Validate Plugin - Trigger validation of single field

I have some `&lt;select&gt;` inputs using the [chosen plugin](http://harvesthq.github.com/chosen/) that I want to validate as &quot;required&quot; on the client side. Since &quot;chosen&quot; hides the actual select element and creates a widget with divs and spans, native HTML5 validation doesn&#39;t seem to work properly. The form won&#39;t submit (which is good), but the error message is not shown, so the user has no idea what&#39;s wrong (which is not good).

I&#39;ve turned to the jQuery validation plugin (which I planned on using eventually anyways) but haven&#39;t had any luck so far. Here&#39;s my [test case](http://jsfiddle.net/mrZF5/4/):

    &lt;form&gt;
        &lt;label&gt;Name: &lt;input name=&quot;test1&quot; required&gt;&lt;/label&gt;
        &lt;label&gt;Favorite Color:
            &lt;select name=&quot;test2&quot; required&gt;
                &lt;option value=&quot;&quot;&gt;&lt;/option&gt;
                &lt;option value=&quot;red&quot;&gt;Red&lt;/option&gt;
                &lt;option value=&quot;blue&quot;&gt;Blue&lt;/option&gt;
                &lt;option value=&quot;green&quot;&gt;Green&lt;/option&gt;
            &lt;/select&gt;
        &lt;/label&gt;
        &lt;input type=&quot;submit&quot;&gt;
    &lt;/form&gt;

&lt;!-- --&gt;

    $(document).ready(function(){
        $(&#39;select&#39;).chosen();
        $(&#39;form&#39;).validate();
    });

This is letting the `select` through with an empty value, without validating or showing the error message. When I comment out the `chosen()` line, it works fine.

How can I validate `chosen()` inputs with the jQuery validation plugin, and show the error message for invalid ones?

How can I use jQuery validation with the &quot;chosen&quot; plugin?

I&#39;m using ASP .NET MVC 3 with Data Annotations and the jQuery validate plugin.

Is there a way to mark that a certain field (or certain data annotation) should only be validated server-side?

I have a phone number field with a masking plugin on it, and the regular expression validator goes crazy on the user&#39;s end. The regex is only a fail-safe (in case someone decides to hack the javascript validation), so I don&#39;t need it to run on the client side. But I&#39;d still like the other validation to run client side.

ASP .NET MVC Disable Client Side Validation at Per-Field Level

I&#39;m trying to use jQuery validate plugin to confirm my password entry.

However, I don&#39;t want it to be a required field.

Just IF a user wants to change the password, they would need to confirm it.

If not, both fields shouldn&#39;t be validated.

    jQuery(&#39;.validatedForm&#39;).validate({
        rules: {
            password: {
                required: true,
                minlength: 5
            },
            password_confirm: {
                required: true,
                minlength: 5,
                equalTo: &quot;#password&quot;
            }
        }
    }); 

This is working perfectly, but again, both fields are required.

I would like to have this optional, in case someone just wants to change for instance their email or username and leave the password alone.



Confirm Password with jQuery Validate

Is there a simple way to change the default error values in the [jQuery validation plugin][1]?

I just want to rewrite the error messages to be more personal to my app--I have a lot of fields, so I don&#39;t want to set the message individually for field x...I know I can do that!


  [1]: http://jqueryvalidation.org/

jQuery validation: change default error message

How do you create a simple, custom rule using the jQuery Validate plugin (using [`addMethod`][1]) that doesn&#39;t use a regex?

For example, what function would create a rule that validates only if at least one of a group of checkboxes is checked?


  [1]: http://jqueryvalidation.org/jQuery.validator.addMethod

jQuery Validate Plugin - How to create a simple custom rule?

I have something like this:

    &lt;form&gt;
    &lt;input name=&#39;roles&#39; type=&#39;checkbox&#39; value=&#39;1&#39; /&gt;
    &lt;input name=&#39;roles&#39; type=&#39;checkbox&#39; value=&#39;2&#39; /&gt;
    &lt;input name=&#39;roles&#39; type=&#39;checkbox&#39; value=&#39;3&#39; /&gt;
    &lt;input name=&#39;roles&#39; type=&#39;checkbox&#39; value=&#39;4&#39; /&gt;
    &lt;input name=&#39;roles&#39; type=&#39;checkbox&#39; value=&#39;5&#39; /&gt;
    &lt;input type=&#39;submit&#39; value=&#39;submit&#39; /&gt;
    &lt;form&gt;

I would like to validate that at least one checkbox (roles) should be checked, is it possible with jquery.validate ?



jquery validate check at least one checkbox

Can anyone tell me why client side validation is not working in my MVC 4 application.

### _layout.schtml ###

    @Scripts.Render(&quot;~/bundles/jquery&quot;)
    @RenderSection(&quot;scripts&quot;, required: false)


In my web.config I have:

    &lt;appSettings&gt;
       &lt;add key=&quot;ClientValidationEnabled&quot; value=&quot;true&quot; /&gt;
       &lt;add key=&quot;UnobtrusiveJavaScriptEnabled&quot; value=&quot;true&quot; /&gt;
    &lt;/appSettings&gt;

In my login.cshtml page I have:

    @using (Html.BeginForm())
    {
        &lt;div class=&quot;formscontent&quot;&gt;

            &lt;ol&gt;
                &lt;li&gt;
                    @Html.LabelFor(x =&gt; x.AgreementNumber)
                    &lt;br /&gt;
                    @Html.TextBoxFor(x =&gt; x.AgreementNumber, new { size = &quot;30&quot; })
                    &lt;br /&gt;
                    @Html.ValidationMessageFor(m =&gt; m.AgreementNumber)
                    &lt;br /&gt;
                    &lt;br /&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    @Html.LabelFor(x =&gt; x.UserName)
                    &lt;br /&gt;
                    @Html.TextBoxFor(x =&gt; x.UserName, new { size = &quot;30&quot; })
                    &lt;br /&gt;
                    @Html.ValidationMessageFor(m =&gt; m.UserName)
                    &lt;br /&gt;
                    &lt;br /&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    @Html.LabelFor(x =&gt; x.Password)
                    &lt;br /&gt;
                    @Html.PasswordFor(x =&gt; x.Password, new { size = &quot;30&quot; })
                    &lt;br /&gt;
                    @Html.ValidationMessageFor(m =&gt; m.Password)
                    &lt;br /&gt;
                    &lt;br /&gt;
                &lt;/li&gt;
            &lt;/ol&gt;

        &lt;/div&gt;
        
        &lt;ol&gt;
            &lt;li&gt;
                @Html.CheckBoxFor(m =&gt; m.RememberMe)
                @Html.LabelFor(m =&gt; m.RememberMe, new { @class = &quot;checkbox&quot; })
            &lt;/li&gt;
        &lt;/ol&gt;
        
        &lt;br /&gt;
        
        &lt;input class=&quot;mainbutton&quot; type=&quot;submit&quot; value=&quot;@Model.Localisation.TranslateHtmlString(&quot;LogonBtn&quot;)&quot; /&gt;&lt;br /&gt;
        &lt;div style=&quot;text-align: left; padding: 0 5px 5px 10px;&quot;&gt;
            Forgot login-info? clik &lt;a class=&quot;link&quot; href=&quot;@Url.Action(&quot;Index&quot;, &quot;Credentials&quot;)&quot;&gt;here.&lt;/a&gt;
        &lt;/div&gt;
        
    }

In the bottom of login page:

    @section Scripts {
      @Scripts.Render(&quot;~/bundles/jqueryval&quot;)
    }

JavaScript is enabled in my browser. In the MVC 4 template project from Visual Studio client validation works fine.

Running the application, on login page when viewing page source, I see this rendered:

    &lt;label for=&quot;AgreementNumber&quot;&gt;number&lt;/label&gt;
    &lt;br /&gt;
    &lt;input id=&quot;AgreementNumber&quot; name=&quot;AgreementNumber&quot; size=&quot;30&quot; type=&quot;text&quot; value=&quot;387893&quot; /&gt;
    &lt;br /&gt;
    &lt;span class=&quot;field-validation-valid&quot; data-valmsg-for=&quot;AgreementNumber&quot; data-valmsg-  replace=&quot;true&quot;&gt;&lt;/span&gt;

and in this in the bottom:


    &lt;script src=&quot;/BMWebsite/Scripts/jquery.unobtrusive-ajax.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;/BMWebsite/Scripts/jquery.validate.inline.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;/BMWebsite/Scripts/jquery.validate.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;/BMWebsite/Scripts/jquery.validate.unobtrusive.js&quot;&gt;&lt;/script&gt;


My model properties are annotated:

    public class LogonModel : ModelBase
    {
        [MyRequired(&quot;AgreementNumberRequiredProperty&quot;)]
        [MyDisplay(&quot;AgreementNumberLabel&quot;)]
        public string AgreementNumber { get; set; }

        [MyRequired(&quot;UserNameRequiredProperty&quot;)]
        [MyDisplay(&quot;UserNameLabel&quot;)]
        public string UserName { get; set; }

        [MyRequired(&quot;PasswordRequiredProperty&quot;)]
        [DataType(DataType.Password)]
        [MyDisplay(&quot;PasswordLabel&quot;)]
        public string Password { get; set; }

        [MyDisplay(&quot;RememberMeCheckBox&quot;)]
        public bool RememberMe { get; set; }
    }
`MyRequired` is a class derived from the regular RequiredAttribute. The reason is that my error messages are localised by overriding the `FormatErrorMessage(string name)` method of the `RequiredAttribute` class. And it works fine - My labels and error messages are localized.

### MyRequired.cs ###

    public class MyRequiredAttribute : RequiredAttribute
    {
        private readonly string _errorMessagekey;

        public MyRequiredAttribute(string errorMessage)
        {
            _errorMessagekey = errorMessage;
        }

        public override string FormatErrorMessage(string name)
        {
            var translation = HttpContext.Current.Session[&quot;translation&quot;] as LocalisationHelper;

            return translation != null ? translation.Translate(_errorMessagekey) : ErrorMessage;
        }
    }


I put a breakpoint in the POST version of my login action method, and it is being hit. The form is posted to server where server side validation happens. Client side validation doesn&#39;t happen.

What am I missing?

Thank you.

MVC 4 client side validation not working

How would I validate hidden inputs and not visible text inputs with jQuery Form Validation plugin? The problem is, that I&#39;m using auto-suggest plugin, which generates a hidden input for selected items:

    &lt;input id=&quot;hiddenInput&quot; type=&quot;hidden&quot; name=&quot;something&quot; value=&quot;1&quot; /&gt;

I have 2 inputs like this (both of them only allow 1 item), which I want to validate and display the error in parent `&lt;td&gt;`.
This is what I&#39;ve gotten so far, but it doesn&#39;t display the error or submit a form, if the value is actually a number.

    $(&quot;#form1&quot;).validate({
            rules: {
                something: {
                    number:true,
                    min:1,
                    required:true
                }
            }
            })

jQuery Validation plugin - Validating hidden inputs and not visible?

I&#39;ve seen many questions with variations on this theme, but I&#39;m looking for the straightforward solution:

HTML form, jQuery validation, multiple fields are required. When the form is submitted, validation jumps to the first error and highlights it. To increase usability, I want to scroll to that first error field. But it keeps blowing up the validation entirely or throwing scrollTo errors.

I need to use the standard validation plugin (http://docs.jquery.com/Plugins/Validation) but any scroller would be fine, tho I had been trying with scrollTo (http://flesler.blogspot.com/2007/10/jqueryscrollto.html).

Sample code is at http://jsfiddle.net/DtgKQ/1/, any help is appreciated.

When form is validated, how to SCROLL to the first error instead of jumping?

I created a new ASP.Net MVC 4 project using the template in Visual Studio 2012.  After upgrading to jQuery 1.9, the login functionality breaks.  Specifically, I get the error

&gt; 0x800a138f - JavaScript runtime error: Unable to get property &#39;call&#39; of undefined or null reference

at line 1172, column 5 in jquery.validate.js

How can I fix this issue?

Error in jquery.validate.js in MVC 4 Project with jQuery 1.9

I&#39;d like to validate a form using the jquery validate plugin, but I&#39;m unable to use the &#39;name&#39; value within the html - as this is a field also used by the server app.
Specifically, I need to limit the number of checkboxes checked from a group. (Maximum of 3.) All of the examples I have seen, use the name attribute of each element. What I&#39;d like to do is use the class instead, and then declare a rule for that.



*html*


*This works:*  

    &lt;input class=&quot;checkBox&quot; type=&quot;checkbox&quot; id=&quot;i0000zxthy&quot; name=&quot;salutation&quot;  value=&quot;1&quot; /&gt;

This doesn&#39;t work, but is what I&#39;m aiming for:

    &lt;input class=&quot;checkBox&quot; type=&quot;checkbox&quot; id=&quot;i0000zxthy&quot; name=&quot;i0000zxthy&quot;  value=&quot;1&quot; /&gt;




*javascript:*


    var validator = $(&quot;.formToValidate&quot;).validate({    
        rules:{     
        &quot;salutation&quot;:{  
                 required:true,  
            },  
            &quot;checkBox&quot;:{  
                 required:true,  
              minlength:3  }  
       }   
    });


Is it possible to do this - is there a way of targeting the class instead of the name within the rules options? Or do I have to add a custom method?

Cheers,
Matt

jQuery Validation using the class instead of the name value

I would like to place one error label (**Not All**) in a custom location. jQuery provides this &lt;http://docs.jquery.com/Plugins/Validation/validate#toptions&gt; option but I could not find anything about how to place one specific error message and not change the default location of all the rest?

Be sure to check all the answers below. There are multiple solutions to this. Thanks all!

Custom Error Label Placement using jQuery validate (For all or some of your errors)

I&#39;m using the excellent [jquery.validation plugin][1] by J&#246;rn Zaefferer and I was wondering whether there&#39;s a easy way to automatically trim form elements before they are validated?

The following is a cut down but working example of a form which validates a email address:

    &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;
            &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
    &lt;html&gt;
    &lt;head&gt;
        &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=ISO-8859-1&quot; /&gt;
        &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;
               type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
        &lt;script src=&quot;http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate.js&quot; 
               type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
            $().ready(function() {
              $(&quot;#commentForm&quot;).validate({
                rules: {
                    email: {
                        required: true,
                        email: true
                    }
                }
              });
            });
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
    
      &lt;form class=&quot;cmxform&quot; id=&quot;commentForm&quot; method=&quot;get&quot; action=&quot;&quot;&gt;
         &lt;label for=&quot;cemail&quot;&gt;E-Mail:&lt;/label&gt;&lt;input id=&quot;cemail&quot; name=&quot;email&quot;
          class=&quot;required email&quot; /&gt;
         &lt;input class=&quot;submit&quot; type=&quot;submit&quot; value=&quot;Submit&quot;/&gt;
      &lt;/form&gt;
    
    &lt;/body&gt;
    &lt;/html&gt;

The problem is that some users are getting confused because they accidently enter some whitespace in their email address, e.g. &quot;test@test.com   &quot;. And the form won&#39;t submit and has a error message: &quot;Please enter a valid email address.&quot;. Non-techy users don&#39;t know how to spot whitespace and may just quit the site rather than try to work out what they&#39;ve done wrong.

Anyway, I was hoping I could chain &quot;`jQuery.trim(value)`&quot; before the validation so the
whitespace is removed and the validation error never occurs?

I could use [addMethod][2] to build my own email validation function. But I&#39;m sure there&#39;s a more elegant solution?

  [1]: http://bassistance.de/jquery-plugins/jquery-plugin-validation/
  [2]: http://docs.jquery.com/Plugins/Validation/Validator/addMethod#namemethodmessage

All Jquery Validate Solutions on Gang of Coders

Total of 41 Jquery Validate Solutions