1

jquery form validator pluginを使用してフォームを検証しようとしています。電子メールが指定されていない場合は電子メールアドレスが必要であると表示され、電子メールの値が有効でない場合は無効な電子メールアドレスが表示されるなどのカスタムメッセージを表示したい。しかし、どちらの場合も、「正しい電子メール アドレスが指定されていません」などの同じデフォルト メッセージが表示されます。これ好きにしてみた

<form action="" id="registration-form">
  <p>E-mail
    <input name="email"  id="email" data-validation="email" >
  </p>
  <p>
    <input type="submit" value="Validate">
    <input type="reset" value="Reset form">
  </p>
</form>

スクリプトは

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.20/jquery.form-validator.min.js"></script>
$.validate({ 
onElementValidate : function(valid, $el, $form, errorMess) {
  if ($el.attr('name') == 'email') {
    alert('Input ' +$el.attr('name')+ ' is ' + ( valid ? 'VALID':'NOT VALID') );
    var value = $('#email').val();
    if (value) {
      var filter=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i
      if (! filter.test(value)) {
          alert('invalid');
          errorMess = 'invalid email';
        }
    } else {
      alert('no mail');
      errorMess = 'no email';
    }       
  }
  alert('errorMess :: ' + errorMess);
  $('.help-block form-error').html(errorMess);
},  
borderColorOnError: '#b94a48',
errorMessagePosition : 'inline',
modules : 'location, date, security, file',
onModulesLoaded : function() {
  $('#country').suggestCountry();
}
});
4

1 に答える 1

0

データ検証に複数の値を追加すると、実際に魔法が行われます。

<input name="email"  id="email" data-validation="required, email" >
于 2016-06-09T09:30:24.613 に答える