ошибка с подтверждением регулярного выражения jquery

Question

Я новичок в программировании. Я пытаюсь проверить форму. Я сделал это с помощью php (я использую Codeigniter) и не имел проблем с этим, отлично работает.

Когда дело доходит до jquery, у меня проблемы. Например, для имени пользователя он должен появиться значком ok, если вход проверен. Для этого у меня есть:

var FormValidation = function() { 

var handleValidation2 = function() { 
    // for more info visit the official plugin documentation: 
    // http://docs.jquery.com/Plugins/Validation 

     var form2 = $('#form-val'); 
     var error2 = $('.alert-error', form2); 
     var success2 = $('.alert-success', form2); 

     //IMPORTANT: update CKEDITOR textarea with actual content before submit 
     form2.on('submit', function() { 
      for(var instanceName in CKEDITOR.instances) { 
       CKEDITOR.instances[instanceName].updateElement(); 
      } 
     }) 

     form2.validate({ 
      errorElement: 'span', //default input error message container 
      errorClass: 'help-inline', // default input error message class 
      focusInvalid: false, // do not focus the last invalid input 
      ignore: "", 
      rules: { 

       username: { 
        minlength: 2, 
        maxlength: 15, 
        regex: "^[a-zA-Z0-9]*[a-zA-Z]+[a-zA-Z0-9]*$", 
        required: true 
       }, 

       name: { 
        minlength: 2, 
        maxlength: 50, 
        // regex: , 
        required: true 
       }, 

       lastname: { 
        minlength: 2, 
        maxlength: 50, 
        required: true 
       }, 

       gender: { 
        required: true 
       }, 

       date_born: { 
        required: true 
       }, 

       email: { 
        required: true, 
        email: true 
       }, 

       status: { 
        required: true 
       }, 

       member_id: { 
        minlength: 5, 
       }, 

       documentType_id: { 
        required: true 
       }, 

       documentn: { 
        required: true, 
        minlength: 2 
       }, 
       address_street: { 
        required: true 
       }, 

       address_number: { 
        required: true 
       }, 

       address_floor: { 
        required: false 
       }, 

       zipcode: { 
        required: true 
       }, 

       city: { 
        required: true 
       }, 

       state: { 
        required: true 
       }, 

       country_id: { 
        required: true 
       }, 

       phone: { 
        required: true 
       }, 

       cellphoneNumber: { 
        required: true 
       }, 

       cellCompany: { 
        required: true 
       }, 

       cellbrand: { 
        required: true 
       }, 

       marital_status: { 
        required: true 
       }, 

       sons: { 
        required: true 
       }, 
      }, 

      messages: { // custom messages for radio buttons and checkboxes 
       username: { 
        required: "Este campo es requerido", 
        minlength: "El nombre de usuario debe tener como mínimo 2 caracteres", 
        maxlength: "El nombre de usuario debe tener como máximo 15 caracteres", 
       }, 

       membership: { 
        required: "Please select a Membership type" 
       }, 
       service: { 
        required: "Please select at least 2 types of Service", 
        minlength: jQuery.format("Please select at least {0} types of Service") 
       } 
      }, 

      errorPlacement: function (error, element) { // render error placement for each input type 
       if (element.attr("name") == "education") { // for chosen elements, need to insert the error after the chosen container 
        error.insertAfter("#form_2_education_chzn"); 
       } else if (element.attr("name") == "membership") { // for uniform radio buttons, insert the after the given container 
        error.addClass("no-left-padding").insertAfter("#form_2_membership_error"); 
       } else if (element.attr("name") == "editor1" || element.attr("name") == "editor2") { // for wysiwyg editors 
        error.insertAfter($(element.attr('data-error-container'))); 
       } else if (element.attr("name") == "service") { // for uniform checkboxes, insert the after the given container 
        error.addClass("no-left-padding").insertAfter("#form_2_service_error"); 
       } else { 
        error.insertAfter(element); // for other inputs, just perform default behavior 
       } 
      }, 

      invalidHandler: function (event, validator) { //display error alert on form submit 
       success2.hide(); 
       error2.show(); 
       App.scrollTo(error2, -200); 
      }, 

      highlight: function (element) { // hightlight error inputs 
       $(element) 
        .closest('.help-inline').removeClass('ok'); // display OK icon 
       $(element) 
        .closest('.control-group').removeClass('success').addClass('error'); // set error class to the control group 
      }, 

      unhighlight: function (element) { // revert the change done by hightlight 
       $(element) 
        .closest('.control-group').removeClass('error'); // set error class to the control group 
      }, 

      success: function (label) { 
       if (label.attr("for") == "service" || label.attr("for") == "membership") { // for checkboxes and radio buttons, no need to show OK icon 
        label 
         .closest('.control-group').removeClass('error').addClass('success'); 
        label.remove(); // remove error label here 
       } else { // display success icon for other inputs 
        label 
         .addClass('valid').addClass('help-inline ok') // mark the current input as valid and display OK icon 
        .closest('.control-group').removeClass('error').addClass('success'); // set success class to the control group 
       } 
      }, 

      submitHandler: function (form) { 
       success2.show(); 
       error2.hide(); 
      } 

     }); 

     $('#form-val').select2({ 
      placeholder: "Select an Option", 
      allowClear: true 
     }); 

     //apply validation on chosen dropdown value change, this only needed for chosen dropdown integration. 
     $('.chosen, .chosen-with-diselect', form2).change(function() { 
      form2.validate().element($(this)); //revalidate the chosen dropdown value and show error or success message for the input 
     }); 

     //apply validation on select2 dropdown value change, this only needed for chosen dropdown integration. 
     $('.select2', form2).change(function() { 
      form2.validate().element($(this)); //revalidate the chosen dropdown value and show error or success message for the input 
     }); 
} 

return { 
    main function to initiate the module 
    init: function() {   
     handleValidation2(); 
    } 
}; 
}(); 

Это полный код, еще не завершен вносить изменения. Дело в том, что erros появляется, если ввод меньше 2 символов или больше 15, но когда он является правильным вводом, значок ok не отображается и имеет следующую ошибку при его проверке:

Uncaught TypeError: не может вызвать метод 'call' of undefined

Если я стираю правило, появляется значок «regex» ok. Но, как вы можете видеть во фрагменте, с этим полем это не работает.

В чем проблема? thnx заранее.

Answer 1

Если вы хотите, чтобы соответствовать регулярное выражение без написания собственного метода (как в Hayzeus в) ответ, загрузить JQuery -Validate дополнительные методы:

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.min.js"></script> 

Затем вы можете использоватьМетод 0 проверки:

  username: { 
       minlength: 2, 
       maxlength: 15, 
       pattern: "[a-zA-Z0-9]*[a-zA-Z]+[a-zA-Z0-9]*", 
       required: true 
      }, 

Метод автоматически оборачивает шаблон с ^ и $, так что вам не нужно их в регулярном выражении.

Answer 2

Вы не можете просто предоставить строку регулярных выражений в своих правилах. Вам нужно добавить настраиваемый метод в валидатор.

Что-то вроде этого:

$.validator.addMethod("regex", function(value, element) { 
    var regex = /^[a-zA-Z0-9]*[a-zA-Z]+[a-zA-Z0-9]*$/ 
    return regex.test(value); 
}, "Invalid Name"); 

Тогда в правиле:

username: { 
    minlength: 2, 
    maxlength: 15, 
    regex: true, 
    required: true 
}