0

良い一日。最初に、コードの最後の部分で大きな混乱が生じたことをお詫びしたいと思います。事前入力フォームの検証に問題があります。これまでに行ったことは、値が事前に入力されたフォームです。ユーザーがフィールドをクリックすると、事前に入力された値が削除されます。このフォームを空のフィールドに対して検証しようとしましたが、事前に入力されている限り、欠落している文字列があることは示されません。

HTMLを提示しましょう：

    <form action="" method="post" id="form1" class="form" action="scripts/form-quote.php">
    <input class="swap validate"     id="name"      name="name"         type="text" value="Name" />                                             <p id="iname" class="validation-error"></p>
    <input class="swap emailvalid"   id="email"     name="email"        type="text" value="E-mail" />                                           <p id="iemail" class="validation-error"></p>
    <textarea class="swap validate" id="add-req" name="add-req" cols="43" rows="8" >Please explain your requirements</textarea>                 <p id="iadd-req" class="validation-error"></p>
    <input class="swap"  id="ad"        name="ad"           type="text" value="Where did you hear about us?" />

    <input class="submit" name="Submit" type="submit" value="Send">
</form>

およびjQuery - この部分は正常に動作しています:

    $.fn.swapText = function(){
    return this.each(function(){
        var tmpDefVal = $(this).val();
        $(this).css('color', '#999');

        $(this).focus(function(){
            if($(this).val() == tmpDefVal){
                $(this)
                    .css('color', '#000')
                    .val('');
            }
        });

        $(this).blur(function(){
            if($(this).val() == ''){
                $(this)
                    .css('color', '#999')
                    .val(tmpDefVal);
            }
        });

    });
};

$(document).ready(function(){

    $('.swap').swapText();

});

jQuery - これは完全な混乱です。私はずっと前に行った既存のものをいくつかの助けを借りて再作成しようとしていましたが、空のフィールドに対して検証していました。ここで、事前入力されたフィールドに対して検証したいと思います。

    function isNotEmpty(string){

    if(string.length < 1){
        return false;
    }else{
        return true;
    }
}

function checkOnChange(){
    var infoField = document.getElementById('i'+this.id);

    if(this.type == 'checkbox'){ 
        if(this.checked){
            infoField.innerHTML = '';
        }else{
            infoField.innerHTML = 'Required field';
        }
    }else{
        if(isNotEmpty(this.value)){
            this.className = 'ok';
            infoField.innerHTML = '';
            //this.style.backgroundColor = '';
        }else{
            //this.style.backgroundColor = 'red';
            this.className = 'err';
            infoField.innerHTML = 'Required field';
        }
    }
}



$(document).ready(function(){
    $('.swap').swapText();
    $('#email').swapText();

    $('#email').keyup(function(){
        var regexp = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

        if(regexp.test($(this).val())){
            $(this).removeClass('err');
            $(this).addClass('ok');
        }else{
            $(this).removeClass('ok');
            $(this).addClass('err');
        }
    });
});


window.onload = function(){

    var inputName = document.getElementById('name');
    var inputMsg = document.getElementById('add-req');

    document.forms[0].onsubmit = function(){
        var formValid = true;

        if(isNaN(this.nrklienta.value)){
        }else{
        }

        if(!isNotEmpty(this.pers.value)){
            var infoField = document.getElementById('i'+this.pers.id);

            this.pers.className = 'err';
            infoField.innerHTML = 'Required field';

            formValid = false;
        }else{
        }

        //return false;
        if(formValid){
            return true;
        }else{
            return false;
        }
    }


}





//* Email validation

$(document).ready(function(){

    $('#email').swapText();

    $('#email').keyup(function(){
        var regexp = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

        if(regexp.test($(this).val())){
            $(this).removeClass('err');
            $(this).addClass('ok');
        }else{
            $(this).removeClass('ok');
            $(this).addClass('err');
        }
    });
});

コードの最後の部分が大きく混乱して申し訳ありませんが、これは私が達成しようとしていることを示すためのものです。したがって、ユーザーが #name、#email (電子メールの検証コードが機能するはずですが、なぜ機能しないのかわかりません) および #add-req (またはクラス .validate で実行できる場合はより良い) を入力しない場合は、 [送信] ボタンをクリックすると、フォームは送信されず、p (.validation-error) "必須フィールド" + 実際のフィールドのクラスを変更するメッセージが表示されます。

ここのjsFiddle

4

1 に答える 1