0

こんにちは私はサインアップフォームを持っています、それは6つの入力フィールドを持っています

htmlコード

<div id="signup">
    <form  id="suform" method="POST" action="signup/newUser">
        <p>
            <label>Frist Name</label>
            <input type="text" name="fName"/>
            <span class="errorMessage"></span>
        </p>
        <p>
            <label>Last Name</label>
            <input type="text" name="lName"/>
            <span class="errorMessage"></span>
        </p>
        <p>
            <label>Email</label>
            <input type="text" name="Email"/>
            <span class="errorMessage"></span>
        </p>
        <p>
            <label>Mobile Number</label>
            <input type="text" name="MNumber"/>
            <span class="errorMessage"></span>
        </p>
        <p>
            <label>Password</label>
            <input type="password" name="Password"/>
            <span class="errorMessage"></span>
        </p>
        <p>
            <label>Re Password</label>
            <input type="password" name="RePassword"/>
            <span class="errorMessage"></span>
        </p>
        <p>
            <input type="submit" class="button" value="sign up"/>
        </p>
    </form>
</div>

ユーザーがサインアップボタンをクリックしたとき、最初に空の入力フィールドがないことを確認します。空の入力フィールドが見つかった場合は、その入力フィールドに残されたエラーメッセージを出力します。

jqueryコード

$(document).ready(function(){
    $('#suform').on('submit', function(e){
        e.preventDefault();
        var errorCount = 0;
        $('span.errorMessage').text(''); // reset all error mesaage
        $('input').each(function(){
            var $this = $(this);
            if($this.val() === ''){
                var error = 'Please fill ' + $this.prev('label').text(); // take the input field from label
                $this.next('span').text(error);
                errorCount = errorCount + 1;   
            }
        });
        if(errorCount === 0){
            $(this)[0].submit(); // submit form if no error
        }
    });
});

ユーザーがパスワードを確実に保存できるように、パスワードを2回入力してほしい

私の質問は、2つのパスワード入力フィールドが等しいかどうかを確認する方法です。そうでない場合は、その2つの入力フィールドの左側にメッセージエラーを出力します。

コード

4

7 に答える 7

3

フィールドをチェックし、jQueryなしでエラーを表示します。

if (document.forms[0].Password.value != document.forms[0].RePassword.value) {
    document.forms[0].Password.parentNode.getElementsByClassName("errorMessage")[0].innerHTML="Passwords aren't the same!";
    document.forms[0].RePassword.parentNode.getElementsByClassName("errorMessage")[0].innerHTML="Passwords aren't the same!";
}

ページに複数のフォームがある場合（検索フォームだけでも）、document.forms[0]それに応じて調整する必要があります。

フォームでこのコードを使用するonsubmit="return checkForm();"には、次のようにフォームタグに追加します。

<form  id="suform" method="POST" action="signup/newUser" onsubmit="return checkForm();">

次に、スクリプトタグで、問題が発生した場合にfalseを返す（つまり、フォームの送信を停止する）関数checkCodeを作成します。

<script type="text/javascript">
<!--
    function checkCode() {
        if (document.forms[0].Password.value != document.forms[0].RePassword.value) {
            document.forms[0].Password.parentNode.getElementsByClassName("errorMessage")[0].innerHTML="Passwords aren't the same!";
            document.forms[0].RePassword.parentNode.getElementsByClassName("errorMessage")[0].innerHTML="Passwords aren't the same!";
            return false;
        }
    }
//-->
</script>
于 2012-05-12T18:16:08.837 に答える
2

まあこれは私が思うにうまくいくかもしれません。、

 var password= $('input[name="Password"]').val();
 var repass= $('input[name="RePassword"]').val();

 if(password!=repass){
  var error = 'Password not matching';
       $('input[name="RePassword"]').next('span').text(error);
       $('input[name="Password"]').next('span').text(error);
         errorCount = errorCount + 1;  
  }else if(password=="" || repass==""){
            if(password==""){
        var error = 'Please enter a password.';
       $('input[name="Password"]').next('span').text(error)
         errorCount = errorCount + 1;  
    }else{
           var error = 'Please enter a repassword.';
       $('input[name="RePassword"]').next('span').text(error)
         errorCount = errorCount + 1;  
  }
   }
   }else{
     continue;
    }
于 2012-05-12T18:18:12.730 に答える
1

あなたはそのようにそれを行うことができます：

var pass1 = $('input[name=Password]').val();
var pass2 = $('input[name=RePassword]').val();
if(pass1 != '' && pass1 != pass2) {
    //show error
    var error = 'Password confirmation doesn\'t match.';
    $('input[name=Password]').next('span').text(error);
    $('input[name=RePassword]').next('span').text(error);
    errorCount = errorCount + 1;   
}

ラベルの「for」プロパティは次のように使用されます。

<label for="myPasswordField">
    <input type="password" id="myPasswordField" name="Password" />
</label>

したがって、ラベルをクリックすると、そのID属性を持つ関連要素にフォーカスが設定されます。

電話フィールドが番号であるかどうかを確認するには、次のことが必要です。

var mobile = $('input[name=MNumber]').val();
if(isNaN(parseFloat(mobile )) && !isFinite(mobile )) {
    var error = 'Mobile number incorect.';
    $('input[name=MNumber]').next('span').text(error);
    errorCount = errorCount + 1; 
}
于 2012-05-12T18:13:00.963 に答える
1 
    <p>
        <label>Password</label>
        <input type="password" name="Password"/>
        <span class="errorMessage"></span>
    </p>
    <p>
        <label>Re Password</label>
        <input type="password" name="RePassword"/>
        <span class="errorMessage"></span>
    </p>


if ( $("input[type=password][name='Password']").val() == $("input[type=text][name='RePassword']").val(){
    //Do this
}
于 2012-05-12T18:14:03.410 に答える
1

このようなもの？http://jsfiddle.net/K5CMC/

var $this = $(this);

            if($this.val() === ''){
                var error = 'Please fill ' + $this.prev('label').text(); // take the input field from label
                $this.next('span').text(error);
                errorCount = errorCount + 1;   
            }else if($this.attr('id') === 'Password'){
                //compare the two fields
                if($('#Password').val() !== $('#RePassword')){
                    //they don't match, do stuff

                }
            }
于 2012-05-12T18:17:11.743 に答える
1

あなたはJsFiddleでこのデモのようにそれを行うことができます

$(document).ready(function(){
    $('#suform').on('submit', function(e){
        e.preventDefault();
        var errorCount = 0;
        $('span.errorMessage').text(''); // reset all error mesaage
        $('input').each(function(){
            var $this = $(this);
            if($this.val() === ''){
                var error = 'Please fill ' + $this.prev('label').text(); // take the input field from label
                $this.next('span').text(error);
                errorCount = errorCount + 1;   
            }
            else
            if($(this).attr('name') == "RePassword")
                if($('input[name=Password]').val() != $(this).val())
                    alert("must have same password");
        });
        if(errorCount === 0){
            $(this)[0].submit(); // submit form if no error
        }
    });
});​
于 2012-05-12T18:25:23.460 に答える
1 
 $(document).ready(function(){
    $('#suform').on('submit', function(e){
        e.preventDefault();
        var errorCount = 0;
        $('span.errorMessage').text(''); // reset all error mesaage
        $('input').each(function(){
            var $this = $(this);
            if($this.val() === ''){
                var error = 'Please fill ' + $this.prev('label').text(); // take the input field from label
                $this.next('span').text(error);
                errorCount = errorCount + 1;   
            }
        });
        if($('input[name="Password"]').val() != $('input[name="RePassword"]').val())
        {
            var error = 'Password not match'; // take the input field from label
            $('input[name="RePassword"]').next('span').text(error);
            errorCount = errorCount + 1;   
        }
        if(errorCount === 0){
            $(this)[0].submit(); // submit form if no error
        }
    });
});
于 2012-05-12T18:27:45.260 に答える