1

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);           
    }           

  });
});

他のどこにも私の名前タグとの競合はないので、何が起こっているのかわかりません

4

1 に答える 1

1

この行が犯人です

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

フィールドが 1 文字の場合は と評価されfalse、わざわざ次の条件をチェックする必要はありません。name.length

これだけでコードを簡略化できます

if (name.length < 2) {

これは、次の場合にも機能しますname=''。

また、先頭と末尾のスペースを削除するには、次のように名前フィールドを取得することをお勧めします。

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

そうすれば、フィールド内の 2 つ以上のスペースでも検証がトリガーされます。

アップデート：

input問題は、フィールドにすでに値があることです。フォーカス/ぼかしイベントを使用して、必要に応じて削除/追加しています。これは、検証時に長さ = 4 の値としてカウントされます。

それを解決するにはいくつかの方法があります。

  1. を使用しplaceholderます。次のように、最新のすべてのブラウザーでサポートされています。

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

  2. 次のように、名前の検証にさらに条件を追加します。

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

これで問題が解決するはずです

于 2012-12-07T06:04:26.757 に答える