jQuery 유효성 검사: 기본 오류 메시지 변경

jQuery 유효성 검사: 기본 오류 메시지 변경

jQuery 유효성 검사 플러그인에서 기본 오류 값을 변경할 수 있는 간단한 방법이 있습니까?

오류 메시지를 앱에 좀 더 개인적으로 쓰려고 합니다. 필드가 많아서 x 필드에 대해 메시지를 개별적으로 설정하고 싶지 않습니다.그럴 수 있다는 거 알아요!

메시지를 재정의하려면 유효성 검사 플러그인 뒤에 포함된 별도의 파일/스크립트에 이 코드를 추가하십시오. 원하는 대로 편집하십시오. :)

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}.")
});

유효성 검사 통화에서 사용자 자신의 메시지를 지정할 수 있습니다.유효성 검사 플러그인 설명서에 사용된 Remember the Milk(우유 저장) 등록 양식에서 이 코드를 들어 올리고 약어를 사용하면 메시지를 쉽게 지정할 수 있습니다. http://jquery.bassistance.de/validate/demo/milk/), :

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")
        }
    }
});

validate(...)에 대한 전체 API: http://jqueryvalidation.org/validate

이것은 저에게 효과가 있었습니다.

$.validator.messages.required = 'required';

이것은 저에게 효과가 있었습니다.

// 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.",
            }
        }
    })

이미 JQuery를 사용하고 있기 때문에 페이지 설계자가 다음 코드가 아닌 사용자 지정 메시지를 마크업에 추가할 수 있습니다.

<input ... data-msg-required="my message" ...

또는 모든 필드에서 단일 짧은 data-msg 속성을 사용하는 보다 일반적인 솔루션:

<form id="form1">
    <input type="text" id="firstName" name="firstName" 
        data-msg="Please enter your first name" />
    <br />
    <input type="text" id="lastName" name="lastName" 
        data-msg="Please enter your last name" />
    <br />
    <input type="submit" />
</form>

코드에는 다음과 같은 내용이 포함됩니다.

function getMsg(selector) {
    return $(selector).attr('data-msg');
}

$('#form1').validate({
    // ...
    messages: {
        firstName: getMsg('#firstName'),
        lastName: getMsg('#lastName')
    }
    // ...
});

다른 가능한 해결책은 필드를 루프하여 각 필드에 동일한 오류 메시지를 추가하는 것입니다.

$('.required').each(function(index) {
  $(this).rules("add", {
    messages: {
      required: "Custom error message."
   }
  });
});

플러그인 소스 코드를 변경하는 대신 다운로드 현지화 폴더와 같은 형식으로 추가 js 파일을 포함하고 유효성 검사를 로드한 후 이 파일을 포함할 수 있습니다.제이에스

jQuery.extend(jQuery.validator.messages, {
    required: ...,
    maxlength: jQuery.validator.format(...),
    ...
});

@Josh: 리소스 번들의 번역된 메시지로 솔루션을 확장할 수 있습니다.

<script type="text/javascript">
    $.validator.messages.number = '@Html.Raw(@Resources.General.ErrorMessageNotANumber)';
</script>

이 코드 부분을 _Layout.cshtml(MVC)에 넣으면 모든 보기에 사용할 수 있습니다.

jQuery 양식 유효성 검사 사용자 정의 오류 메시지 - tutsmake

데모

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

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

최신 버전에는 당신이 할 수 있는 멋진 인라인 기능이 있습니다.

단순 입력 필드인 경우 속성을 추가할 수 있습니다.data-validation-error-msg -- 렇게이 --

data-validation-error-msg="Invalid Regex"

조금 더 무거운 것이 필요한 경우 유효성 검사 기능에 전달되는 모든 값을 가진 변수를 사용하여 항목을 완전히 사용자 지정할 수 있습니다.자세한 내용은 이 링크를 참조하십시오. -- https://github.com/victorjonsson/jQuery-Form-Validator#fully-customizable

저는 이것이 이렇게 쉬울 줄은 생각도 못 했습니다. 저는 그러한 검증을 처리하기 위한 프로젝트를 진행하고 있었습니다.

아래 답변은 많은 노력 없이 유효성 확인 메시지를 변경하고자 하는 사람에게 큰 도움이 될 것입니다.

아래 접근법은 "이 필드" 대신 "자리 표시자 이름"을 사용합니다.

쉽게 수정할 수 있습니다.

   // 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  
       });  
   });  

모든 기본 오류 메시지를 제거하려면 다음을 사용합니다.

$.validator.messages.required = "";

$(function() {

$("#username_error_message").hide();
$("#password_error_message").hide();
$("#retype_password_error_message").hide();
$("#email_error_message").hide();

var error_username = false;
var error_password = false;
var error_retype_password = false;
var error_email = false;

$("#form_username").focusout(function() {

    check_username();
    
});

$("#form_password").focusout(function() {

    check_password();
    
});

$("#form_retype_password").focusout(function() {

    check_retype_password();
    
});

$("#form_email").focusout(function() {

    check_email();
    
});

function check_username() {

    var username_length = $("#form_username").val().length;
    
    if(username_length < 5 || username_length > 20) {
        $("#username_error_message").html("Should be between 5-20 characters");
        $("#username_error_message").show();
        error_username = true;
    } else {
        $("#username_error_message").hide();
    }

}

function check_password() {

    var password_length = $("#form_password").val().length;
    
    if(password_length < 8) {
        $("#password_error_message").html("At least 8 characters");
        $("#password_error_message").show();
        error_password = true;
    } else {
        $("#password_error_message").hide();
    }

}

function check_retype_password() {

    var password = $("#form_password").val();
    var retype_password = $("#form_retype_password").val();
    
    if(password !=  retype_password) {
        $("#retype_password_error_message").html("Passwords don't match");
        $("#retype_password_error_message").show();
        error_retype_password = true;
    } else {
        $("#retype_password_error_message").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($("#form_email").val())) {
        $("#email_error_message").hide();
    } else {
        $("#email_error_message").html("Invalid email address");
        $("#email_error_message").show();
        error_email = true;
    }

}

$("#registration_form").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 && error_password == false && error_retype_password == false && error_email == false) {
        return true;
    } else {
        return false;   
    }

});

});

사용자 지정 또는 필드 레이블 또는 유효성 검사 중인 필드와 관련된 모든 동적 레이블을 추가합니다.dom을 통해 무엇이든 선택할 수 있고 오류 메시지가 있는 아무 곳에나 추가할 수 있습니다.

아래는 필수 메시지의 시작 부분에 "이 필드" 대신 필드 레이블을 추가하는 예입니다.

jQuery.extend(jQuery.validator.messages, {

    required: function(result,e){

        let field_label = "This field ";

        if($(e).closest('.form-group').find('label').length > 0)
            field_label = $(e).closest('.form-group').find('label').html();

        return field_label+" is required.";

        },

});

이러한 사용자 지정 오류 메시지 대신 텍스트 필드 유형을 지정할 수 있습니다.

예: 필드 유형을 = '이메일' 유형으로 설정합니다.

그러면 플러그인이 필드를 식별하고 올바르게 검증합니다.

언급URL : https://stackoverflow.com/questions/2457032/jquery-validation-change-default-error-message