デフォルトのフィールド値を使用したJavascript検証

Question

初心者はここにあります。助けが必要です。

私は自分のウェブサイトにあらかじめ書かれたjavascriptフォームバリデーターを使用していますが、事実はのデフォルト値のフィールド用に設計されていません。したがって、問題は、バリデーターが "Name"と "Message"の値を有効とみなし、メッセージがエラーメッセージなしで処理されることです。

私はいくつかの研究を行い、いくつかの提案を見ましたが、javascriptに関する知識はほとんどありません。それらの実装方法や別の検証ルールセットの作成方法はわかりません。私は以下[http://www.faridhadi.com/][1]

から無料お問い合わせフォームを使用していますところで

は、私が働いているスクリプトです：

私はあなたたちを願っています私を助けることができます！ありがとう！

// JavaScript Document 

$(document).ready(function() { 

    $('#contactForm #submit').click(function() { 
     // Fade in the progress bar 
     $('#contactForm #formProgress').hide(); 
     $('#contactForm #formProgress').html('<img src="images/ajax-loader.gif" /> Sending&hellip;'); 
     $('#contactForm #formProgress').fadeIn(); 

     // Disable the submit button 
     $('#contactForm #submit').attr("disabled", "disabled"); 

     // Clear and hide any error messages 
     $('#contactForm .formError').html(''); 

     // Set temaprary variables for the script 
     var isFocus=0; 
     var isError=0; 

     // Get the data from the form 
     var name=$('#contactForm #name').val(); 
     var email=$('#contactForm #email').val(); 
     var subject=$('#contactForm #subject').val(); 
     var message=$('#contactForm #message').val(); 

     // Validate the data 
     if(name=='') { 
      $('#contactForm #errorName').html('This is a required field.'); 
      $('#contactForm #name').focus(); 
      isFocus=1; 
      isError=1; 
     } 
     if(email=='') { 
      $('#contactForm #errorEmail').html('This is a required field.'); 
      if(isFocus==0) { 
       $('#contactForm #email').focus(); 
       isFocus=1; 
      } 
      isError=1; 
     } else { 
      var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; 
      if(reg.test(email)==false) { 
       $('#contactForm #errorEmail').html('Invalid email address.'); 
       if(isFocus==0) { 
        $('#contactForm #email').focus(); 
        isFocus=1; 
       } 
       isError=1; 
      } 
     } 
     if(message=='') { 
      $('#contactForm #errorMessage').html('This is a required field.'); 
      if(isFocus==0) { 
       $('#contactForm #message').focus(); 
       isFocus=1; 
      } 
      isError=1; 
     } 

     // Terminate the script if an error is found 
     if(isError==1) { 
      $('#contactForm #formProgress').html(''); 
      $('#contactForm #formProgress').hide(); 

      // Activate the submit button 
      $('#contactForm #submit').attr("disabled", ""); 

      return false; 
     } 

     $.ajaxSetup ({ 
      cache: false 
     }); 

     var dataString = 'name='+ name + '&email=' + email + '&subject=' + subject + '&message=' + message; 
     $.ajax({ 
      type: "POST", 
      url: "php/submit-form-ajax.php", 
      data: dataString, 
      success: function(msg) { 

       //alert(msg); 

       // Check to see if the mail was successfully sent 
       if(msg=='Mail sent') { 
        // Update the progress bar 
        $('#contactForm #formProgress').html('<img src="images/ajax-complete.gif" /> Message sent.').delay(2000).fadeOut(400); 

        // Clear the subject field and message textbox 
        $('#contactForm #subject').val(''); 
        $('#contactForm #message').val(''); 
       } else { 
        $('#contactForm #formProgress').html(''); 
        alert('There was an error sending your email. Please try again.'); 
       } 

       // Activate the submit button 
       $('#contactForm #submit').attr("disabled", ""); 
      }, 
      error: function(ob,errStr) { 
       $('#contactForm #formProgress').html(''); 
       alert('There was an error sending your email. Please try again.'); 

       // Activate the submit button 
       $('#contactForm #submit').attr("disabled", ""); 
      } 
     }); 

     return false; 
    }); 
}); 

Answer 1

あなたはもっと自分の "デフォルト値" のためのHTML5 placeholder属性を使用します。すべてのブラウザをサポートするにはjQuery watermarkプラグインを使用してください。ポリは古いブラウザを使用してplaceholderをサポートします。検証のため

も、それはあなたが入力が空である場合、その値を説明するために変数を割り当てる変更することができます初期value="No Subject"を意味し、デフォルトでは場合

Answer 2

プラグイン広く使用さjQuery Validatorを使用することをお勧めします。

var name = $('#contactForm #name'); 
name = $.trim(name.val()) || name.prop("defaultValue"); 
... 
var email = ....