Запретить пользователю «.next» с помощью jQuery

Question

Я пытаюсь в реальном времени проверять поля ввода из базы данных. У меня есть Java Script ниже:

$(document).ready(function(){ 
    $('#emailcheck').load('check-email.php').show(); 

    $(".next").click(function() { 

     $.post('check-email.php', { email: form.email.value }, 
     function(result) { 
      $('#emailcheck').html(result).show(); 

     });  
    }); 
}); 

HTML:

<form name="email"> 
    <input type="email" class="form-control" id="email" name="email" placeholder="email"><br> 
    <div id="emailcheck"></div> 
</form> 
    <p><a class="btn btn-primary next">Go to step 2</a></p> 

Как вы можете видеть, когда я нажимаю .next он говорит мне, если электронная почта доступна или нет в #emailcheck.

Если результат, полученный из check-email.php, «доступен», это нормально. Но результат «Взялся», например, как я могу остановить .next, даже если это произойдет? Потому что я хочу, чтобы пользователь исправил поле, прежде чем идти дальше.

Дополнительный код Java Script Я также использую для той же форме:

 // jQuery.validate script, does client-side validation 
     $(document).ready(function(){ 
      $(".next").click(function(){ 
       var form = $("#myform"); 
       form.validate({ 
        errorElement: 'div', 
        errorClass: 'formerror', 
        highlight: function(element, errorClass, validClass) { 
         $(element).closest('.form-group').addClass("has-error"); 
        }, 
        unhighlight: function(element, errorClass, validClass) { 
         $(element).closest('.form-group').removeClass("has-error"); 
        }, 
        rules: { 
         username: { 
          required: true, 
          minlength: 1, 
          remote: { 
          url: "check-username.php", 
          async: false, 
          type: "post", } 
         },  
         email: { 
          required: true, 
          minlength: 1, 
          remote: { 
          url: "check-email.php", 
          async: false, 
          type: "post", } 
         }, 

        }, 
        messages: { 
         username: { 
          required: "Username required", 
          remote: "taken", 
         },     
         email: { 
          required: "Email required", 
         },              
        } 
       }); 
       if (form.valid() === true){ 
        if ($('#stepusername').is(":visible")){ 
         current_fs = $('#stepusername'); 
         next_fs = $('#stepemail'); 
        }else if($('#stepemail').is(":visible")){ 
         current_fs = $('#stepemail'); 
         next_fs = $('#stepsuccess'); 
        } 

        next_fs.show(); 
        current_fs.hide(); 
       } 


      }); 

     }); 



// prevent sending empty and stuff  
     $(document).ready(function(){ 
     $('.form-horizontal').keypress(function (event) { 
      if (event.which === 13) { 
       event.preventDefault(); 
       $(".next").trigger('click'); 
      } 
     }); 
     }); 

// For server-side validation. 
     $(document).ready(function(){ 
      $(function(){ 
       $('input[type=submit]').click(function(){ 
        if($("#myform").valid()){ 

        $.ajax({ 
         type: "POST", 
         url: "sent.php", 
         data: $("#myform").serialize(), 

         beforeSend: function(){ 
          $('#stepsuccess').html('Loading...');    
         }, 
         success: function(data){ 
          $('#stepsuccess').html(data); 
         } 

        }); 
        } 
       }); 
      }); 
      }); 

Answer 1

То, что вы на самом деле пытаетесь сделать, чтобы предотвратить поведение по умолчанию «рядом» нажмите кнопку события. Поэтому вы должны объявить событие как $(".next").click(function(event){, а затем на дне после if (form.valid()) вы должны добавить:

if (form.valid() === true){ 
    // everything you originally had here 
} else { 
    event.preventDefault(); 
}