2

htmlコード

<div id="signup">
    <form  id="suform" method="POST" action="roma/roma">
        <p>
            <label>Frist Name</label>
            <input type="text" id="sufName"/>
            <span class="errorMessage"></span>
        </p>
        <p>
            <label>Last Name</label>
            <input type="text" id="sulName"/>
            <span class="errorMessage"></span>
        </p>
        <p>
            <label>Email</label>
            <input type="text" id="suEmail"/>
            <span class="errorMessage"></span>
        </p>
        <p>
            <label>Mobile Number</label>
            <input type="text" id="suMNumber"/>
            <span class="errorMessage"></span>
        </p>
        <p>
            <label>Password</label>
            <input type="password" id="suPassword"/>
            <span class="errorMessage"></span>
        </p>
        <p>
            <label>Re Password</label>
            <input type="password" id="suRePassword"/>
            <span class="errorMessage"></span>
        </p>
        <p>
            <input type="submit" class="button" value="sign up"/>
        </p>
    </form>
</div>

サインアップ ページを作成するのは 6 つの入力フィールドだけです 。これは、空の入力フィールドがないことを確認するための jQuery コードです。空の入力フィールドがない場合は、フォームを送信します。

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).submit(); // submit form if no error
        }
    });
});

コードは、空の入力フィールドがないことを確認します。空のフィールドが見つかった場合、エラー メッセージが表示されます。それ以外の場合は送信する必要がありますが、送信は機能しません。

コード

4

4 に答える 4

3

jQuery 検証プラグインを確認してください。このclass = "required"ために、必要な入力フィールドに forを追加し、validationそれを呼び出すだけです。

$('form').validation({
  // any options you want
});

また、エラー メッセージの表示、条件付き検証の実行などの便利なことも行います。

于 2012-05-12T14:37:34.717 に答える
3

を使ってみてください$(this)[0].submit();。$(this) を使用すると、フォームへの jQuery オブジェクト参照が参照されます。submit()jQuery のメソッドが実際に何をするのかはわかりませんが、フォームを送信していないことは明らかです。Using$(this)[0]は、探している標準の DOM submit メソッドを使用する実際の DOM 要素を指します。

これはもうご存知だと思いますが、JS を持っていないユーザーもいれば、意図的にフォームを改ざんするユーザーもいるため、サーバー側とクライアント側の検証を使用する必要があります。ちょっとだけ「お忘れなく！」

于 2012-05-12T14:33:17.967 に答える
1

inseadを削除e.preventDefault()して使用できます。return

$('form').on('submit', function(e){
    var errorCount = 0;
    $('span.errorMessage').text('');
    $('input').each(function(){
        var $this = $(this);
        if($this.val() === ''){
            var error = 'Please fill ' + $this.prev('label').text();
            $this.next('span').text(error);
            errorCount = errorCount + 1;   
        }
    });
    return errorCount === 0;
});

デモ: http://jsfiddle.net/h9njC/27/

于 2012-05-12T14:35:13.067 に答える
0 
$('form').on('submit',function(e){
    var errorCount = 0;
    $('span.errorMessage').text('');
    $('input').each(function(){
        var $this = $(this);
        if($this.val() === ''){
            var error = 'Please fill ' + $this.prev('label').text();
            $this.next('span').text(error);
            errorCount = errorCount + 1;   
        }
    });
    if(errorCount === 0){
        alert('done'); // just an alert to notice when everything OK [remove it]
        $this.submit(); // submit the form on success
    } else e.preventDefault(); // halt the submission on default
  });

デモ

于 2012-05-12T15:13:13.093 に答える