検証に失敗した場合、Jqueryの検証は機能しません。

Question

名前に対してリアルタイムのjquery検証があります。リアルタイムで作業していますが、フォームを送信すると、エラーメッセージが表示された後でも値が送信されます。 これは検証のために私のコードです：

$(document).ready(function(){ 
    var $regexname=/^([a-zA-Z]{3,16})$/; 
    $('.firstname ').on('keypress keydown keyup',function(){ 
     if (!$(this).val().match($regexname)) { 
      $('.fname').removeClass('hidden'); 
      $('.fname').show(); 
     } 
     else{ 
      $('.fname').addClass('hidden'); 
      } 
    }); 
    }); 

誰でも、エラーメッセージが表示され形成doesnot時に提出を受けることを私を助けてください。

Answer 1

この方法をお試しください。

$('.firstname ').on('keypress keydown keyup',function(event){ 
     if (!$(this).val().match($regexname)) { 
      event.preventDefault(); 
      $('.fname').removeClass('hidden'); 
      $('.fname').show(); 
     } 
     else{ 
      $('.fname').addClass('hidden'); 
      } 
    }); 

Answer 2

使用event.preventDefaultORreturn false。

$(document).ready(function(){ 
var $regexname=/^([a-zA-Z]{3,16})$/; 
$('.firstname ').on('keypress keydown keyup',function(event){ 
     event.preventDefault(); 
     if (!$(this).val().match($regexname)) { 
      $('.fname').removeClass('hidden'); 
      $('.fname').show(); 
     } 
    else{ 
     $('.fname').addClass('hidden'); 
     } 
    }); 
}); 

それとも

$(document).ready(function(){ 
var $regexname=/^([a-zA-Z]{3,16})$/; 
$('.firstname ').on('keypress keydown keyup',function(event){   
     if (!$(this).val().match($regexname)) { 
      $('.fname').removeClass('hidden'); 
      $('.fname').show(); 
     } 
     else{ 
      $('.fname').addClass('hidden'); 
     } 
     return false; 
    }); 
}); 

Answer 3

リターン偽あなたの検証が失敗した場合、真それが通過した場合。

ので、私はあなたがあなたの関数で書くことをお勧めしますコードは...

$('.firstname ').on('keypress keydown keyup',function(event){ 
     if (!$(this).val().match($regexname)) { 

      $('.fname').removeClass('hidden'); 
      $('.fname').show(); 
      return false; 
     } 
     else{ 
      $('.fname').addClass('hidden'); 
      return true; 
      } 
    }); 

Answer 4

は、エラーが表示さであるかどうかをチェックするために、ボタンのクリックイベントの検証を追加しています。

$('#buttonId').on('click',function(){ 
    if($('.fname').is(':visible')) 
    { 
    alert('Resolve error before submitting the form.'); 
    return false; 
    } 
    })