Проверка формы jQuery

Question

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

Если кто-нибудь может мне помочь, я бы очень признателен. Я прикрепил свои js, html и скриншоты, я работаю над woocommerce и wordpress. Если кто-нибудь может помочь мне исправить это, я буду более чем счастлив помочь вернуть пользу.

JS

$('form.cart') 

     /* start ! This section adds & removes red backgroud and border */ 
     .on('blur change', '.input-text', function() { 
       $(".single-attendee-wrapper .input-text").each(function(){ 
         var $this = $(this); 
         var validated = true; 

         if ($(this)) { 
           if ($this.val() == '') { 
             $(".single-attendee-wrapper .count").css('background','#ED616A'); 
             $(".single-attendee-wrapper .count").css('color','#fff'); 
             validated = false; 
           } 
         } 
         if (validated) { 
             $(".single-attendee-wrapper .count").css('background','#D1D3D4'); 
             $(".single-attendee-wrapper .count").css('color','#808285'); 
         } 

       }); 
     }) 
     /* This section adds & removes red backgroud and border ! Finish */ 




     .on('blur change', '.input-text, select', function() { 
       var $this = $(this); 
       var $parent = $this.closest('.form-row'); 
       var validated = true; 

       if ($parent.is('.validate-required')) { 
         if ($this.val() == '') { 
           $parent.removeClass('woocommerce-validated').addClass('woocommerce-invalid woocommerce-invalid-required-field'); 
           validated = false; 
         } 
       } 

       if ($parent.is('.validate-email')) { 
         if ($this.val()) { 

           /* http://stackoverflow.com/questions/2855865/jquery-validate-e-mail-address-regex */ 
           var pattern = new RegExp(/^((([a-z]|d|[!#$%&'*+-/=?^_`{|}~]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])+(.([a-z]|d|[!#$%&'*+-/=?^_`{|}~]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])+)*)|((")((((| )*(
))?(| )+)?(([--]|!|[#-[]|[]-~]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(\([-  
-]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))))*(((|  )*(
))?(| )+)?(")))@((([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])*([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))).)+(([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])*([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))).?$/i); 

           if (! pattern.test($this.val() )) { 
             $parent.removeClass('woocommerce-validated').addClass('woocommerce-invalid woocommerce-invalid-email'); 
             validated = false; 
           } 
         } 
       } 

       if (validated) { 
         $parent.removeClass('woocommerce-invalid woocommerce-invalid-required-field').addClass('woocommerce-validated'); 
       } 
     }) 

HTML

<form enctype="multipart/form-data" method="post" class="cart" action="/hardy-group/product/manual-handling-3/?add-to-cart=414" style="background: none repeat scroll 0% 0% transparent;"> 
<h3 class="addon-name">One Attendee </h3> 
       <p class="form-row form-row-wide addon-wrap-414-one-attendee woocommerce-validated validate-required"> 
         <label>Candidate Name </label> <input type="text" value="" name="addon-414-one-attendee-candidate-name" data-price="" class="input-text addon addon-custom" style="border-top: 0px none;"> 
       </p> 
       <p class="form-row form-row-wide addon-wrap-414-one-attendee woocommerce-validated validate-required"> 
         <label>Address </label> <input type="text" value="" name="addon-414-one-attendee-address" data-price="" class="input-text addon addon-custom"> 
       </p> 
       <p class="form-row form-row-wide addon-wrap-414-one-attendee validate-required woocommerce-validated"> 
         <label>Candidate Email </label> <input type="text" value="" name="addon-414-one-attendee-candidate-email" data-price="" class="input-text addon addon-custom"> 
       </p> 
       <p class="form-row form-row-wide addon-wrap-414-one-attendee validate-required woocommerce-invalid woocommerce-invalid-required-field"> 
         <label>Phone </label> <input type="text" value="" name="addon-414-one-attendee-phone" data-price="" class="input-text addon addon-custom"> 
       </p> 
       <p class="form-row form-row-wide addon-wrap-414-one-attendee validate-required woocommerce-invalid woocommerce-invalid-required-field"> 
         <label>N.I Number </label> <input type="text" value="" name="addon-414-one-attendee-n-i-number" data-price="" class="input-text addon addon-custom"> 
       </p> 
       <p class="form-row form-row-wide addon-wrap-414-one-attendee validate-required woocommerce-invalid woocommerce-invalid-required-field"> 
         <label>EUSR Number </label> <input type="text" value="" name="addon-414-one-attendee-eusr-number" data-price="" class="input-text addon addon-custom"> 
       </p> 

     <div class="clear"></div> 
</div> 
<div class="count item1" style="background: none repeat scroll 0% 0% rgb(237, 97, 106); color: rgb(255, 255, 255);">1</div></div><div class="single-attendee-wrapper item2"><div class=" product-addon product-addon-two-attendees" style="display: block;"> 

<h3 class="addon-name">Two Attendees </h3> 
       <p class="form-row form-row-wide addon-wrap-414-two-attendees validate-required woocommerce-validated"> 
         <label>Candidate Name </label> <input type="text" value="" name="addon-414-two-attendees-candidate-name" data-price="" class="input-text addon addon-custom" style="border-top: 0px none;"> 
       </p> 
       <p class="form-row form-row-wide addon-wrap-414-two-attendees validate-required woocommerce-validated"> 
         <label>Address </label> <input type="text" value="" name="addon-414-two-attendees-address" data-price="" class="input-text addon addon-custom"> 
       </p> 
       <p class="form-row form-row-wide addon-wrap-414-two-attendees woocommerce-validated validate-required"> 
         <label>Candidate Email </label> <input type="text" value="" name="addon-414-two-attendees-candidate-email" data-price="" class="input-text addon addon-custom"> 
       </p> 
       <p class="form-row form-row-wide addon-wrap-414-two-attendees validate-required woocommerce-validated"> 
         <label>Phone </label> <input type="text" value="" name="addon-414-two-attendees-phone" data-price="" class="input-text addon addon-custom"> 
       </p> 
       <p class="form-row form-row-wide addon-wrap-414-two-attendees woocommerce-validated validate-required"> 
         <label>N.I Number </label> <input type="text" value="" name="addon-414-two-attendees-n-i-number" data-price="" class="input-text addon addon-custom"> 
       </p> 
       <p class="form-row form-row-wide addon-wrap-414-two-attendees woocommerce-validated validate-required"> 
         <label>EUSR Number </label> <input type="text" value="" name="addon-414-two-attendees-eusr-number" data-price="" class="input-text addon addon-custom"> 
       </p> 
     <div class="clear"></div> 
</div><div class="count item2" style="background: none repeat scroll 0% 0% rgb(237, 97, 106); color: rgb(255, 255, 255);">2</div></div><div class="single-attendee-wrapper item3"><div class=" product-addon product-addon-three-attendees" style="display: block;"> 

<h3 class="addon-name">Three Attendees </h3> 
       <p class="form-row form-row-wide addon-wrap-414-three-attendees woocommerce-validated validate-required"> 
         <label>Candidate Name </label> <input type="text" value="" name="addon-414-three-attendees-candidate-name" data-price="" class="input-text addon addon-custom" style="border-top: 0px none;"> 
       </p> 
       <p class="form-row form-row-wide addon-wrap-414-three-attendees woocommerce-validated validate-required"> 
         <label>Address </label> <input type="text" value="" name="addon-414-three-attendees-address" data-price="" class="input-text addon addon-custom"> 
       </p> 
       <p class="form-row form-row-wide addon-wrap-414-three-attendees woocommerce-validated validate-required"> 
         <label>Candidate Email </label> <input type="text" value="" name="addon-414-three-attendees-candidate-email" data-price="" class="input-text addon addon-custom"> 
       </p> 
       <p class="form-row form-row-wide addon-wrap-414-three-attendees woocommerce-validated validate-required"> 
         <label>Phone </label> <input type="text" value="" name="addon-414-three-attendees-phone" data-price="" class="input-text addon addon-custom"> 
       </p> 
       <p class="form-row form-row-wide addon-wrap-414-three-attendees woocommerce-validated validate-required"> 
         <label>N.I Number </label> <input type="text" value="" name="addon-414-three-attendees-n-i-number" data-price="" class="input-text addon addon-custom"> 
       </p> 
       <p class="form-row form-row-wide addon-wrap-414-three-attendees validate-required woocommerce-invalid woocommerce-invalid-required-field"> 
         <label>EUSR Number </label> <input type="text" value="" name="addon-414-three-attendees-eusr-number" data-price="" class="input-text addon addon-custom"> 
       </p> 

     <div class="clear"></div> 
</div><div class="count item3" style="background: none repeat scroll 0% 0% rgb(237, 97, 106); color: rgb(255, 255, 255);">3</div></div><div class=" product-addon product-addon-four-attendees" style="display: none;"> 

</div><div data-price="29.99" data-type="simple" id="product-addons-total"></div> 
       <div class="quantity buttons_added"><input type="button" class="minus" value="-"><div class="quantity-wrapper" style="display: none;"><label>Number of attendees</label><input type="number" class="input-text qty text" title="Number of attendees" value="1" name="quantity" min="1" step="1"></div><input type="button" class="plus" value="+"></div> 

       <button class="single_add_to_cart_button button alt" type="submit" style="display: inline-block;">Place Booking</button>   
     </form> 

Answer 1

В принципе, можно использовать JQuery плагин http://jqueryvalidation.org/

Но если вы хотите, у вас есть подтверждение .. Создать функцию Separe который будет называться на клавишу вверх, что вы пройдете .val() и идентификатор или класс проверить его вы можете прочитать здесь: http://www.w3schools.com/jsref/event_onkeyup.asp

Итак, когда вы проходите .val() в функции вы будете иметь, если состояние Проверяй значение и после добавлений CLAS к этому ID:

if(value == true){ 
    id.addClass('green); 
}else{ 
    id.addClass('red'); 
} 

Css

.green{border: 1px solid green;} 
.red {border: 1px solid red;} 

Пример:

<input type="password" id="pass" name="pass" class="vpb" onkeyup="return return check_password_safety(this.value);"> 

function check_password_safety(safe){ 
var msg = ""; 
var pas_safe = $("#pass").val(); 
var points = pas_safe.length; 
var password_info = document.getElementById('password_info'); //output message div 


var has_letter  = new RegExp("[a-z]"); 
var has_caps  = new RegExp("[A-Z]"); 
var has_numbers  = new RegExp("[0-9]"); 
var has_symbols  = new RegExp("\\W"); 

if(has_letter.test(pas_safe)) { 
    points += 4; } 
if(has_caps.test(pas_safe))  { 
    points += 4; } 
if(has_numbers.test(pas_safe)) { 
points += 4; } 
if(has_symbols.test(pas_safe)) { 
points += 4; } 


if(points >= 24) { 
    msg = '<span style="color: rgb(7, 134, 27);"><b>Strong!</b></span>'; 
} else if(points >= 16) { 
    msg = '<span style="color: rgb(0, 112, 255);"><b>Good!</b></span>'; 
} else if(points >= 12) { 
    msg = '<span style="color: #fa0;"><b>Not Safe!</b></span>'; 
} 
else if(pas_safe == ''){ 
    msg =''; 
} 
else { 
    msg = '<span style="color: #f00;"><b>Very poor!</b></span>'; 
} 


password_info.innerHTML = msg ; 
} 

я прохожу только значение, но вы можете передать также идентификатор элемента.

Answer 2

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

У вас есть два слушателя

.on('blur change', '.input-text', function(){} 

и

.on('blur change', '.input-text, select', function() {} 

событий Это связывание слушателя на размытие/изменении .input-text дважды. Не так много проблем, но, возможно, не нужно. Также в вашем примере нет selects, не уверен, что это ошибка или просто не включена в ваш примерный код. Также первая группа полей не связана в оболочке с классом single-attendee-wrapper (не уверен, если она предназначена или нет, но не будет работать с вашими текущими селекторами в первом прослушивателе).

Первого событие слушатель

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

Первая проблема заключается в том, что вы используете селектор jQuery $(".single-attendee-wrapper .count").css() несколько раз в каждом цикле. Этот селектор согласован дважды для каждого поля в форме, это должно быть кэшировано, поскольку оно не изменится, тогда вы можете массово добавить CSS в селектор, или лучше просто использовать .addClass, даже если у вас есть 1 или больше Правила CSS. Более удобная и понятная, просто добавьте стиль класса в ваш CSS.

Вторая проблема заключается в том, что при применении CSS к каждому $(".single-attendee-wrapper .count").css() в каждом цикле цикла .each он фактически будет работать только против последнего поля во всей форме, так как это последний, который отмечен в петля .each. Попробуйте его с кодом и только пустой валидацией if statement, и вы увидите, что он проверяет его только на последнее поле EUSR Number.

Также он делает все для всех single-attendee-wrapper блоков вместе отдельно, при условии, что вы хотите проверить блоки отдельно. Вы можете сделать это, выбрав текущие поля ближайшего родителя single-attendee-wrapper, тогда каждый цикл может быть запущен только для тех полей этого блока.

Для фактической проверки, что вы хотите сделать, это просмотреть все поля и проверить, действительно ли это, если не установить границу отдельного поля в красный $(this).css('border', 'red 1px solid'), и если она действительна, установите ее по умолчанию на серый $(this).css('border', 'grey 1px solid'). или лучше $(this).addClass('itemError');

.itemError{ 
    border: red 1px solid; 
} 

Так же как это вы хотите использовать validated флаг, а затем установить его в ложное, если какой-либо один из полей не является действительным, то применить стили к блоку ПОСЛЕ.each петля. Таким образом, если какое-либо из полей недействительно, флаг groupValid вызовет это (не только для последнего поля).

Второй слушатель события

Как нет выбирает в вашем коде, это просто делает то же самое, как первый слушатель событий в теории, возможно, рассмотреть вопрос об объединении двух. Вы можете разделить их на отдельные функции и вызвать функции, чтобы они были чистыми и понятными.

, например:

.on('blur change', '.input-text, select', function() { 
    validationFunction1(); 
    validationFunction2($this); 
} 

Второй слушатель событий, насколько я могу сказать, пытается затем проверить проверку отдельного поля. И от тестирования вашего кода, похоже, работает, за исключением того, что у вас нет класса .validate-email на ваших почтовых полях. Также инспектор хромов жалуется на вашу функцию регулярных выражений, поэтому вам может потребоваться пересмотреть это, как только вы ее заработаете.

Поскольку ваш первый прослушиватель событий запускается для отдельного поля, в любом случае вы можете комбинировать это добавление этой функции к первому прослушивателю событий, запустив функцию проверки для этого поля, если у нее есть определенный класс, таким образом он привязан к первая функция проверки. скажем, используя функцию jQuery .hasClass.

Решения для слушателя первого события

Я быстро решать вопросы, я поднял вокруг первого слушателя событий и создал скрипку с рекомендованными моими изменениями:

Fiddle

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