AJAX驗證與jquery

Question

我設置我的錯誤消息在我的表單與jquery，當我去看看它並沒有要求名稱字段是必需的，但只是電子郵件，即使我已經包括它。這裏是我的代碼：

<form method="post" action="" id="contactform"> 
      <fieldset class="first"> 


      <div id="response"></div> 


      <div class="name_input">     
      <input name="name" id="name" class="required" type="text" onfocus="if(this.value == 'Name'){this.value = '';}" onblur="if(this.value == ''){this.value='Name';}" value="Name" maxlength="128" />     
      </div> 



      <div id="email_input">    
      <input id="email" name="email" onfocus="if(this.value == 'Email'){this.value = '';}" onblur="if(this.value == ''){this.value='Email';}" class="required" type="text" value="Email" maxlength="128" />   
      </div> 

      <div id="button"> 
      <input type="submit" class="button" name="Submit" value="" /> 
      </div> 


      </fieldset> 


     </form> 

和我的JS：

$(document).ready(function() { 

$('form #response').hide(); 

$('#button').click(function(e) { 


    e.preventDefault(); 


    var valid = ''; 
    var required = ' is required.'; 
    var name = $('form #name').val(); 
    var email = $('form #email').val(); 



    if (name == '' || name.length < 2) { 
     valid = '<p>Your name' + required +'</p>'; 
    } 

    if (!email.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) { 
     valid += '<p>Your email' + required +'</p>';             
    } 



    if (valid != '') { 

     $('form #response').removeClass().addClass('error') 
      .html('<strong>Please correct the errors below.</strong>' +valid).fadeIn('fast');   

    } 


    else { 

     $('form #response').removeClass().addClass('processing').html('Processing...').fadeIn('fast');          

     var formData = $('form').serialize(); 
     submitForm(formData);   
    }   

    }); 
}); 

有不有我名牌的其他任何地方的任何衝突，所以我不知道什麼是可能發生的情況

Answer 1

這行是元兇

if (name == '' || name.length < 2) { 

當字段有1個字符時，它將評估爲false，n OT懶得查了下條件name.length

你可以只是有這個

if (name.length < 2) { 

這也將工作，如果name=''簡化代碼。

另外，修剪掉開頭和結尾的空格，你可能希望得到的名稱字段是這樣的：

var name = $.trim($('form #name').val()); 

這樣，只是兩個或多個領域的空間也將觸發驗證。

更新：

麻煩的是你必須在input字段中的值了。您正在使用焦點/模糊事件來根據需要刪除/添加它。當您驗證它時，這將作爲長度= 4的值計算。

有幾種方法可以解決它。

1. 使用placeholder。它在所有現代瀏覽器支持這樣的：

   <input type="text" id="name" placeholder="Name">

2. 添加其他條件，以驗證對名稱是這樣的：

   if (name === 'Name' || name.length < 2) {

這應該有希望，解決您的問題