CODEWITHSUNDEEP
jquery-validate
jack
jack

Reputation: 1538

jquery.validation - how to ignore default values when validating mandatory fields

I am using jquery validation plugin to validate a registration form.

Each text input field has instructions pre-filled as values in the input box

ex: for a text-input box id='Name', the default value will be set to 'Enter Your Name'. I have pasted below sample code:

<input type="text" id="Name" value="Enter Your Name" onfocus="if(this.value == 'Your Name'){this.value = '';}" type="text" class="required" onblur="if(this.value == ''){this.value='Your Name';}" size="25" />

What I need to know is how to specify in the validation rule such that the plugin throws a required field error if the input box contains either the default message or empty values.

Help much appreciated.

Upvotes: 17

Views: 36113

Answers (8)

krsoni
krsoni

Reputation: 639

just add this after rule section

onfocusout: function(element) { $(element).valid(); }

and it will be all right.

Upvotes: 1

user1296558
user1296558

Reputation: 41

I made some patch to jquery.validationEngine to allow ignoring some input field for some complexe form. I made the following changes:

  • Add support for jquery.dropkick select skining validation position
  • Add select field invalid for ve_invalid value entry (to be able to display directive without it being a valid selection)
  • Add hideAllInstant to remove validation with no delay
  • Add support for jquery.simpleImageCheck element if original input is hidden, use location of simpleImageCheck instead
  • Add skipValidate class to avoid validation on some fields without disabling them
  • Fix error when no match with prompt_err undefined, destination was generating an error
  • add clearField support to avoid validating jquery.clearField.js
  • add validateHiddenFields, validation on hidden and non-hidden field

In your case you can use the modification for the skipValidate class to perform this. You can find the patched script here along with the english filter (fr one is also available):

jquery.validationEngine.js Patched

jquery.validationEngine-en.js Patched

I should submit those change into git hub, but did not got time to do so right now.

Jerome Godbout

Panthera Dental

Upvotes: 0

Erik Larsson
Erik Larsson

Reputation: 180

If you want to add a custom error message to it jus tuse this.

jQuery.validator.addMethod("defaultInvalid", function(value, element) {
    return !(element.value == element.defaultValue);
}, 'Custom Error Message for this field');

Upvotes: 2

Peter van den Broek
Peter van den Broek

Reputation: 11

I think this is better:

jQuery.validator.addMethod("defaultInvalid", function(value, element) 
{
    return !(element.value == element.defaultValue);
});

Upvotes: 19

Peter
Peter

Reputation: 1

for me the above only worked with the following changes:

jQuery.validator.addMethod("defaultInvalid", function(value, element) 
{
    switch (element.value) 
    {
        case "Your Name":
            if (element.name == "element_name") return false;
            break;
        default: return true; 
            break;
    }
});

Upvotes: 2

Igor
Igor

Reputation: 582

$.validator.addMethod("defaultInvalid", function(value, element, param){
        var r = $(element).rules();
        var req=(this.objectLength(r))?r.required:false; // OR may be var req=r.required; // true, false or undefined.
        return !req || (value!=param);
    },$.validator.messages.required);

...

,rules:{
            message: {
                defaultInvalid:$('#message').attr('placeholder')
            }
        }

Such function takes into consideration cases of "mandatory" & "optional" fields.

Expression "!req" purposely replaces "this.optional(element)" because I get error message "dependency mismatch" in some cases.

Upvotes: 0

user595562
user595562

Reputation:

I think you need to add the "default" case to get this working properly:

jQuery.validator.addMethod("defaultInvalid", function(value, element) {
        switch (element.value) {
          case "$defaultText":
              if (element.name == "$defaultText")
                  return false;
              break;
          default:
            return true;
            break;
        }
});

Upvotes: 0

jack
jack

Reputation: 1538

I figured a way around the problem by creating a custom validation using validator.addMethod, which is really easy.

I have pasted a snippet of my validation block below:

   //1. Define custom validation 
    $(document).ready(function() 
    {
    jQuery.validator.addMethod("defaultInvalid", function(value, element) 
    {
     switch (element.value) 
     {
      case "Your Name": -- this will be the default value in the Name text box
       if (element.name == "Your Name")
          return false;
     }
    }
    //2. Include custom validation in the rules for your element
    $("#aspnetForm").validate(
    {
      rules: 
      {
       Name: "required defaultInvalid"
      },
      messages: 
      {
       Name: "Please input your name"
      }
    })
   }

I have used the same for all the elements which have default values in the form. This works great.

Upvotes: 5

Related Questions