入力フィールドがエラー

Question

私は次のような問題を持っていたときにイベントを実行します。

私は私の形式で入力がパターンに一致しないエラーが（空かそうでない持っていたときに、いくつかのスパンでブレンドしようとしています別の入力にマッチする）。

私はいくつかの異なるコードを試しましたが、どれもうまくいかないようです。ここには私の瞬間があります。

ちょうどあなたが知っている..私はjavascriptやJqueryを考えています。

var help_text_pw1 = $('.help-text-password1'); 
var help_text_pw1_toggle = $('#help-text-pw1'); 

help_text_pw1_toggle.on("click", function(e) { 
    help_text_pw1.slideToggle(); 
}); 

var help_text_pw_confirm = $('.help-text-password-confirm'); 
var help_text_pw_confirm_toggle = $('#help-text-pw1-confirm'); 

help_text_pw_confirm_toggle.on("click", function(e) { 
    help_text_pw_confirm.slideToggle(); 
}); 

var help_text_credit_card = $('.help-text-credit-card'); 
var help_text_credit_card_toggle = $('#help-text-credit-card'); 

help_text_credit_card_toggle.on("click", function(e) { 
    help_text_credit_card.slideToggle(); 
}); 


var password = $('#password1'); 
var confirm_pw = $('#password-confirm1'); 
var submit = $('button[type="submit"]'); 
var credit_card_number = $('credit-card-number1'); 
var form = $('#main-form'); 

$(document).ready(function() { 
    submit.click(function(event){ 

    data = password.val(); 
    var len = data.length; 

    if (password.error()) { 
     $(function() { 
      help_text_pw1.slideDown(); 
     }); 
    } 

    if (confirm_pw.error()) { 
     $(function() { 
      help_text_pw_confirm.slideDown(); 
     }); 
    } 

    if (credit_card_number.error()) { 
     $(function() { 
      help_text_credit_card.slideDown(); 
     }); 
    } 

    if (password.val() != confirm_pw.val()) { 
     confirm_pw.css('border', '2px solid red'); 
     alert("Password and Confirm Password don't match"); 
     // Prevent form submission 
     event.preventDefault(); 
    } 
    }); 
}); 

必要に応じてここにHTMLがあります。

<form id="main-form" method="post"> 
     <fieldset> 
      <legend>COMPLEX</legend> 

      <label for="password1">Password</label> 
      <input type="password" placeholder="password" name="password" id="password1" required pattern="(((?=.*\d)|(?=.*\\\|\/\+\.))(?=.*[a-z])(?=.*[A-Z]).{8,})[A-Za-z0-9\\\/\|\+\.]"> 

      <input type="checkbox" id="pwShow"> 
      <label class="pwShow" for="pwShow">Show Password</label> 
      <div class="help-text" id="help-text-pw1" title="Your password must have at least 8 digits, 1 capital letter and 1 number or 1 special symbol like [ \ |/+ . ].">password help</div> 
      <span class="help-text-password1">Your password must have at least 8 digits, 1 capital letter and 1 number or 1 special symbol like [ \ |/+ . ].</span> 

      <label for="password-confirm1">Confirmation</label> 
      <input type="password" placeholder="confirm password" name="password-confirm" id="password-confirm1" required> 
      <div class="help-text" id="help-text-pw1-confirm" title="This field must match the password entered above.">confirm password help</div> 
      <span class="help-text-password-confirm">This field must match the password entered above.</span> 

      <label for="credit-card-number1">Credit Card</label> 
      <input type="text" placeholder="4111 1111 1111 1111" name="credit-card-number" id="credit-card-number1" required pattern="[0-9]{13,16}"> 
      <div class="help-text" id="help-text-credit-card" title="Enter a valid credit card number like: '4324 1265 2431 5456' or '1221 5356 4234 1'">card number help</div> 
      <span class="help-text-credit-card">Enter a valid credit card number like: '4324 1265 2431 5456' or '1221 5356 4234 1'</span> 

      <button class="form-btn" type="submit">Submit</button> 
     </fieldset> 
    </form> 

ありがとうございます！

Answer 1

submitに、多くの多くの時間後、私はそれが働くんです。

私は単にこれを使用：

今

$(function() { 
    password.on('invalid', function(event) { 
     help_text_pw1.slideDown(); 
     $(this).css('border', '1px solid red'); 
    }); 
    confirm_pw.on('invalid', function(event) { 
     help_text_pw_confirm.slideDown(); 
     $(this).css('border', '1px solid red'); 
    }); 
    credit_card_number.on('invalid', function(event) { 
     help_text_credit_card.slideDown(); 
     $(this).css('border', '1px solid red'); 
    }); 
}); 

（関係なく、どのようなエラーの種類）のコードが呼び出されているいずれかのエラーが発生した場合。

Answer 2

変更しますclickイベントイベントオーケー

$(document).ready(function() { 
    $("#main-form").submit(function(event){ 

    data = password.val(); 
    var len = data.length; 

    if (password.val() != confirm_pw.val()) { 
     confirm_pw.css('border', '2px solid red'); 
     alert("Password and Confirm Password don't match"); 
     // Prevent form submission 
     event.preventDefault(); 
    } 

    if (password.error()) { 
     $(function() { 
      help_text_pw1.slideDown(); 
     }); 
    } 

    if (confirm_pw.error()) { 
     $(function() { 
      help_text_pw_confirm.slideDown(); 
     }); 
    } 

    if (credit_card_number.error()) { 
     $(function() { 
      help_text_credit_card.slideDown(); 
     }); 
    } 
    }); 
});