web-dev-qa-db-ja.com

jQueryを使用してオンサブミットし、値が2〜5文字かどうかを確認する方法は？

テキストフィールドがあるとします。

_Username: <input type="text" id="username" class="required" />
<input type="submit" />
_

そして、私はいくつかのjQueryを持っています：

_$(document).ready(function() {
    user = $("#username");

    user.submit(function() {

    })
})
_

usernameに入力された値の長さが、送信後に2〜5文字の間であるかどうかを確認したい。そうでない場合は、何かが起こります。

私はuser.submit(function(){})の中に何をすべきかわからない。

jqueryformssubmitcharacter
14
Dora

まず、実際のフォームが必要です。

<form id="myForm">
    Username: <input type="text" id="username" class="required" />
    <input type="submit" />
</form>

その後：

$(document).ready(function(){
    $('#myForm').on('submit', function(e){
        e.preventDefault();
        var len = $('#username').val().length;
        if (len < 6 && len > 1) {
            this.submit();
        }
    });
});

または、HTML5ではpattern属性を使用できます（SafariおよびIE9以降ではサポートされていません）。

<form id="myForm">
    Username: <input type="text" id="username" pattern=".{2,5}" required />
    <input type="submit" />
</form>

[〜＃〜] fiddle [〜＃〜]

40
adeneo

入力フィールドの値はuser.val()で、文字列の長さはuser.val().lengthで確認できます。

そうすれば、次のようなことができます。

if(user.val().length < 2 || user.val().length > 5) {
    console.log('test')
}
3
Piet van Dongen

Fiddle を作成しました

次のようにステートメントを使用できます

$(document).ready(function(){  
    $("#form").submit(function(e) {
       length = $("#username").val().length;
       if((length > 2 && length < 5)) {
           $("#output").html("correct, logging in");
       } else {
           $("#output").html("incorrect, must have 3 or 4 chars");
       }
       return (length > 2 && length < 5);
    });
});

そしてHTML

<form id="form" method="POST" action="http://www.cnn.com">
username: <input type="text" id="username" class="required" />
<input type="submit" />
3
Johan Hoeksma

入力タイプテキストではなくformに送信をバインドし、送信イベントでその値を確認します。フォームに何らかのIDを割り当て、フォームIDセレクターを使用して送信をバインドすることをお勧めします。

$('form').submit(function(){
      username = $('#username').val();
     if(username.length > 1 && username.length < 6)
     {
     }
});
1
Adil