jQuery validation change default error message

Question

Is there a simple way to change the default error values in the jQuery validation plugin   I just want to rewrite the error messages to be more personal to my app--I have a lot of fields  so I don t want to set the message individually for field x   I know I can do that

User · Answer

jQuery Form Validation Custom Error Message -tutsmake

Demo

_x000D_

$(document).ready(function(){_x000D_
  $("#registration").validate({_x000D_
    // Specify validation rules_x000D_
    rules: {_x000D_
      firstname: "required",_x000D_
      lastname: "required",_x000D_
      email: {_x000D_
        required: true,_x000D_
        email: true_x000D_
      },      _x000D_
      phone: {_x000D_
        required: true,_x000D_
        digits: true,_x000D_
        minlength: 10,_x000D_
        maxlength: 10,_x000D_
      },_x000D_
      password: {_x000D_
        required: true,_x000D_
        minlength: 5,_x000D_
      }_x000D_
    },_x000D_
    messages: {_x000D_
      firstname: {_x000D_
      required: "Please enter first name",_x000D_
     },      _x000D_
     lastname: {_x000D_
      required: "Please enter last name",_x000D_
     },     _x000D_
     phone: {_x000D_
      required: "Please enter phone number",_x000D_
      digits: "Please enter valid phone number",_x000D_
      minlength: "Phone number field accept only 10 digits",_x000D_
      maxlength: "Phone number field accept only 10 digits",_x000D_
     },     _x000D_
     email: {_x000D_
      required: "Please enter email address",_x000D_
      email: "Please enter a valid email address.",_x000D_
     },_x000D_
    },_x000D_
  _x000D_
  });_x000D_
});

_x000D_

<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
<title>jQuery Form Validation Using validator()</title>_x000D_
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> _x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>_x000D_
<style>_x000D_
  .error{_x000D_
    color: red;_x000D_
  }_x000D_
  label,_x000D_
  input,_x000D_
  button {_x000D_
    border: 0;_x000D_
    margin-bottom: 3px;_x000D_
    display: block;_x000D_
    width: 100%;_x000D_
  }_x000D_
 .common_box_body {_x000D_
    padding: 15px;_x000D_
    border: 12px solid #28BAA2;_x000D_
    border-color: #28BAA2;_x000D_
    border-radius: 15px;_x000D_
    margin-top: 10px;_x000D_
    background: #d4edda;_x000D_
}_x000D_
</style>_x000D_
</head>_x000D_
<body>_x000D_
<div class="common_box_body test">_x000D_
  <h2>Registration</h2>_x000D_
  <form action="#" name="registration" id="registration">_x000D_
 _x000D_
    <label for="firstname">First Name</label>_x000D_
    <input type="text" name="firstname" id="firstname" placeholder="John"><br>_x000D_
 _x000D_
    <label for="lastname">Last Name</label>_x000D_
    <input type="text" name="lastname" id="lastname" placeholder="Doe"><br>_x000D_
 _x000D_
    <label for="phone">Phone</label>_x000D_
    <input type="text" name="phone" id="phone" placeholder="8889988899"><br>  _x000D_
 _x000D_
    <label for="email">Email</label>_x000D_
    <input type="email" name="email" id="email" placeholder="john@doe.com"><br>_x000D_
 _x000D_
    <label for="password">Password</label>_x000D_
    <input type="password" name="password" id="password" placeholder=""><br>_x000D_
 _x000D_
    <input name="submit" type="submit" id="submit" class="submit" value="Submit">_x000D_
  </form>_x000D_
</div>_x000D_
 _x000D_
</body>_x000D_
</html>

_x000D_

User · Answer

The newest version has some nice in-line stuff you can do   If it s a simple input field you can add the attribute data-validation-error-msg like this --  data-validation-error-msg  Invalid Regex    If you need something a little heavier you can fully customize things using a variable with all the values which is passed into the validate function   Reference this link for full details -- https   github com victorjonsson jQuery-Form-Validator fully-customizable

User · Answer

function         quot  username error message quot   hide       quot  password error message quot   hide       quot  retype password error message quot   hide       quot  email error message quot   hide     var error username   false  var error password   false  var error retype password   false  var error email   false      quot  form username quot   focusout function          check username                 quot  form password quot   focusout function          check password                 quot  form retype password quot   focusout function          check retype password                 quot  form email quot   focusout function          check email              function check username          var username length      quot  form username quot   val   length           if username length  lt  5    username length  gt  20               quot  username error message quot   html  quot Should be between 5-20 characters quot               quot  username error message quot   show            error username   true        else              quot  username error message quot   hide              function check password          var password length      quot  form password quot   val   length           if password length  lt  8               quot  password error message quot   html  quot At least 8 characters quot               quot  password error message quot   show            error password   true        else              quot  password error message quot   hide              function check retype password          var password      quot  form password quot   val        var retype password      quot  form retype password quot   val             if password     retype password               quot  retype password error message quot   html  quot Passwords don t match quot               quot  retype password error message quot   show            error retype password   true        else              quot  retype password error message quot   hide              function check email          var pattern   new RegExp     a-zA-Z0-9  -    a-zA-Z0-9 -     a-zA-Z  2 4   i        if pattern test    quot  form email quot   val                  quot  email error message quot   hide          else              quot  email error message quot   html  quot Invalid email address quot               quot  email error message quot   show            error email   true               quot  registration form quot   submit function                                                  error username   false      error password   false      error retype password   false      error email   false                                               check username        check password        check retype password        check email             if error username    false  amp  amp  error password    false  amp  amp  error retype password    false  amp  amp  error email    false            return true        else           return false

User · Answer

To remove all default error messages use    validator messages required

User · Answer

This worked for me     validator messages required    required

User · Answer

I never thought this would be so easy   I was working on a project to handle such validation   The below answer will of great help to one who want to change validation message without much effort   The below approaches uses the  Placeholder name  in place of  This Field    You can easily modify things         Jquery Validation           js-validation   each function              Validation Error Messages          var validationObjectArray               var validationMessages                 this  find  input select   each function        add more type hear            var singleElementMessages                  var fieldName     this  attr  name               if  fieldName      field Name is not defined continue                 return true                             If attr data-error-field-name is given give it a priority   and then to placeholder and lastly a simple text            var fieldPlaceholderName     this  data  error-field-name        this  attr  placeholder       This Field              if     this   prop   required                     singleElementMessages  required       this  data  error-required-message        this  data  error-message       fieldPlaceholderName     is required                           if     this   attr   type        email                    singleElementMessages  email       this  data  error-email-message        this  data  error-message        Enter valid email in   fieldPlaceholderName                                   validationMessages fieldName    singleElementMessages                         this  validate             errorClass      error-message             errorElement    div             messages       validationMessages

User · Answer

Josh  You can expand your solution with translated Message from your resource bundle   lt script type  text javascript  gt        validator messages number     Html Raw  Resources General ErrorMessageNotANumber     lt  script gt    If you put this code part into your  Layout cshtml  MVC  it s available for all your views

User · Answer

instead of these custom error messages we can specify the type of the text field    Ex  set type of the field in to type    email   then plugin will identify the field and validate correctly

User · Answer

Add this code in a separate file script included after the validation plugin to override the messages  edit at will     jQuery extend jQuery validator messages        required   This field is required        remote   Please fix this field        email   Please enter a valid email address        url   Please enter a valid URL        date   Please enter a valid date        dateISO   Please enter a valid date  ISO         number   Please enter a valid number        digits   Please enter only digits        creditcard   Please enter a valid credit card number        equalTo   Please enter the same value again        accept   Please enter a value with a valid extension        maxlength  jQuery validator format  Please enter no more than  0  characters         minlength  jQuery validator format  Please enter at least  0  characters         rangelength  jQuery validator format  Please enter a value between  0  and  1  characters long         range  jQuery validator format  Please enter a value between  0  and  1          max  jQuery validator format  Please enter a value less than or equal to  0          min  jQuery validator format  Please enter a value greater than or equal to  0

User · Answer

Instead of changing the plugin source code you can include an additional js file in the format like those in the downloads localization folder and include that one after loading the validation js  jQuery extend jQuery validator messages        required           maxlength  jQuery validator format

User · Answer

This worked for me      Change default JQuery validation Messages      addnewcadidateform   validate           rules                firstname   required               lastname   required               email   required email                      messages                firstname   Enter your First Name               lastname   Enter your Last Name               email                    required   Enter your Email                   email   Please enter a valid email address

User · Answer

Another possible solution is to loop over the fields  adding the same error message to each field       required   each function index        this  rules  add         messages          required   Custom error message

User · Answer

Since we re already using JQuery  we can let page designers add custom messages to the markup rather than the code    lt input     data-msg-required  my message        Or  a more general solution using a single short data-msg attribute on all fields    lt form id  form1  gt       lt input type  text  id  firstName  name  firstName           data-msg  Please enter your first name    gt       lt br   gt       lt input type  text  id  lastName  name  lastName           data-msg  Please enter your last name    gt       lt br   gt       lt input type  submit    gt   lt  form gt    And the code then contains something like this   function getMsg selector        return   selector  attr  data-msg           form1   validate                  messages            firstName  getMsg   firstName            lastName  getMsg   lastName

User · Answer

You can specify your own messages in the validate call   Lifting and abbreviating this code from the Remember the Milk signup form used in the Validation plugin documentation  http   jquery bassistance de validate demo milk    you can easily specify your own messages   var validator       signupform   validate       rules            firstname   required           lastname   required           username                required  true              minlength  2              remote   users php                       messages            firstname   Enter your firstname           lastname   Enter your lastname           username                required   Enter a username               minlength  jQuery format  Enter at least  0  characters                remote  jQuery format   0  is already in use                         The complete API for validate        http   jqueryvalidation org validate

[jquery] jQuery validation: change default error message

Examples related to jquery

Examples related to jquery-validate