Проверка формы игнорируется

Question

Я пытаюсь создать пользовательскую форму регистрации для плагина WordPress.Я проверяю поля формы с помощью jquery validation с помощью formvalidator.net

Несмотря на то, что сообщения об ошибках валидации отображаются, как и предполагалось, форма все еще отправляется и пользователь регистрируется.Обратные вызовы onError и onSuccess, похоже, не работают.Вот моя форма, что мне не хватает?

    <div class="fn-registration-form">
  <form class="form-horizontal registration-form" role="form">

    <div class="reg-form-group">
      <label for="fn_name" class="sr-only">Your Name</label>
      <input type="text" name="fn_name" id="fn_name" value="" placeholder="Your Name" class="reg-form-control" data-validation="required length" data-validation-length="min5" data-validation-error-msg-container="#val-error-div" />
    </div>

    <div class="reg-form-group">
      <label for="fn_email" class="sr-only">Your Email</label>
      <input type="email" name="fn_email" id="fn_email" value="" placeholder="Your Email" class="reg-form-control" data-validation="required email"data-validation-error-msg-container="#val-error-div"/>
    </div>

    <div class="reg-form-group">
      <label for="fn_pass" class="sr-only">Choose Password</label>
      <input type="password" name="fn_pass" id="fn_pass" value="" placeholder="Choose Password" class="reg-form-control" data-validation="required length" data-validation-length="min5" data-validation-error-msg-container="#val-error-div"/>
    </div>

    <?php wp_nonce_field('fn_new_user','fn_new_user_nonce', true, true ); ?>

    <input type="submit" class="btn btn-primary" id="btn-new-user" value="Register" />
  </form>

    <div style="text-align: center;" id="val-error-div"></div>
    <div class="indicator">Please wait...</div>
    <div class="alert result-message" id="#name-error-div"></div>
</div>
<script src="<?php echo plugins_url('js/jquery.form-validator.js', __FILE__); ?>" type="text/javascript"></script>
<script>
  jQuery.validate({
    lang: 'en',
    validateOnBlur: true,
    scrollToTopOnError: false,
    borderColorOnError: "#a94442",
    borderColorOnSuccess:"#a94442",
    onError: function () {
        $('.result-message').html('ERROR..!');
        return false;
    },
    onSuccess: function(){
        regnewuserval();
        return false; 
    }
  });
</script>

Answer 1

Я закончил тем, что использовал кнопку (вместо input type = "submit") и добавил регистрационный код прямо в обратный вызов onSuccess вместо функции во внешнем js-файле.

Этот код работает и решаетсямоя проблема:

<div class="fn-registration-form">
  <form class="form-horizontal registration-form" role="form" id="fn-reg-form">

    <div class="reg-form-group">
      <label for="fn_name" class="sr-only">Your Name</label>
      <input type="text" name="fn_name" id="fn_name" value="" placeholder="Your Name" class="reg-form-control" data-validation="required length" data-validation-length="min4" data-validation-error-msg-container="#val-error-div" />
    </div>

    <div class="reg-form-group">
      <label for="fn_email" class="sr-only">Your Email</label>
      <input type="email" name="fn_email" id="fn_email" value="" placeholder="Your Email" class="reg-form-control" data-validation="required email"data-validation-error-msg-container="#val-error-div"/>
    </div>

    <div class="reg-form-group">
      <label for="fn_pass" class="sr-only">Choose Password</label>
      <input type="password" name="fn_pass" id="fn_pass" value="" placeholder="Choose Password" class="reg-form-control" data-validation="required length" data-validation-length="min6" data-validation-error-msg-container="#val-error-div"/>
    </div>

    <?php wp_nonce_field('fn_new_user','fn_new_user_nonce', true, true ); ?>

    <button type="submit" class="btn btn-primary" id="btn-new-user">Register</button>
  </form> 

    <div style="text-align: center;" id="val-error-div"></div>
    <div class="val-error"></div>
</div>
<script src="<?php echo plugins_url('js/jquery.form-validator.js', __FILE__); ?>" type="text/javascript"></script>
<script>
jQuery.validate({
    lang: 'en',
    validateOnBlur: true,
    scrollToTopOnError: false,
    onError: function () {
        jQuery('.val-error').html('ERROR: Please check your data');
        return false;
    },
    onSuccess: function(){
        jQuery('.val-error').hide();
         // YOUR CODE GOES HERE
    }
});
</script>

Answer 2

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

Также может быть конфликт с другим плагином jquery, если это веб-сайт WordPress.