Проверка имени jquery с помощью плагина

Question

Я пытаюсь проверить имя пользователя так, чтобы оно принимало только символы. Я также хочу назначить проверку максимальной длины, и первое имя не должно быть пустым.

Но я могу получить валидацию только для персонажей. Теперь я хочу установить максимальную длину для первого имени, и имя не должно быть пустым и при неудачной проверке, оно должно изменить цвет рамки поля ввода на красный и дать сообщение об ошибке.

$(document).ready(function(){ 
 
    jQuery.validator.addMethod("lettersonly", function(value, element) { 
 
    return this.optional(element) || /^[a-z\s]+$/i.test(value); 
 
    }); 
 

 
    $('#myForm').validate({ 
 
    rules: { 
 
     firstName: { 
 
      lettersonly: true 
 

 
     } 
 
    }, 
 
    messages:{ 
 
     firstName: { 
 
      lettersonly: "please enter characters only", 
 
     } 
 
    } 
 
    }); 
 
});

.error{ 
 
    color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script> 
 
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/additional-methods.js"></script> 
 

 

 
<form id="myForm"> 
 
    <label for="firstname" id="label1">firstName:</label> 
 
    <input type="text"id="firstName" name="firstName"><br><br> 
 
</form>

Answer 1

Вы можете использовать встроенную функцию в плагин JQuery-проверки.

https://jqueryvalidation.org/maxlength-method/

Возврат неверно, если элемент

• своего рода ввода текста и его значение слишком долго
• набор флажков, который имеет слишком много коробок проверены
• a выбор и выбор слишком большого количества

Live demo

$('#myForm').validate({ 
rules: { 
    firstName: { 
     lettersonly: true 
     required: true, 
     maxlength: 200 
    } 
}, 
messages:{ 
    firstName: { 
     lettersonly: "please enter characters only", 
     required: "Enter your first name, please.", 
     maxlength: "Funny msg" 
    } 
} 
});