web-dev-qa-db-ja.com

プラグインを使用しないjQueryでのフォーム検証

JQueryを使用して単純なフォームのクライアント側の検証を実行したいのですが、検証にプラグインを使用できません。エラーメッセージを1つのアラートボックスに表示したい。

これは私のフォームです：

<form action="" method="post" class="a">
    Name : <input type="text" class="text" name="name" id="name" /> <br/>
    Address : <input type="text" class="text" name="address" id="address" /> <br/>
    Email: <input type="text" class="text" name="email" id="email" /> <br/>

    <input type="button" id="submit" value="Submit" name="submit" />
</form>

ユーザーが入力を入力せずにフォームを送信した場合、1つのアラートボックスに3つのエラーメッセージを表示する必要があります。このような

Name can not be empty.
Address can not be empty.
email can not be empty.

1つまたは2つのフィールドだけが空のままの場合は、状況に応じてエラーメッセージを制御する必要があります。

ここでは、jQueryを使用して試してみました。ただし、アラートは別々のボックスに表示されます。

私のjQuery：

$('#submit').on('click', function() {
    valid = true;   
    if ($('#name').val() == '') {
        alert ("please enter your name");
        valid = false;
    }

    if ($('#address').val() == '') {
        alert ("please enter your address");
         valid = false;
    }    
});

これが フィドル です。

誰かが私にこれを理解する方法を教えてもらえますか？ありがとうございました。

jqueryformsvalidationalert
6
TNK

フォーム内の各入力要素をループして、値があるかどうかを確認します。そうでない場合は、有効がfalseの場合に後で警告する文字列にエラーメッセージを追加します。

$('#submit').on('click', function() {
    var valid = true,
        message = '';

    $('form input').each(function() {
        var $this = $(this);

        if(!$this.val()) {
            var inputName = $this.attr('name');
            valid = false;
            message += 'Please enter your ' + inputName + '\n';
        }
    });

    if(!valid) {
        alert(message);
    }
});

フィドル： http://jsfiddle.net/WF2J9/17/

8
ninja

次のことを試してください。

  $('#submit').on('click', function() {
    var valid = true,
    errorMessage = "";

    if ($('#name').val() == '') {
       errorMessage  = "please enter your name \n";
       valid = false;
    }

    if ($('#address').val() == '') {
       errorMessage += "please enter your address\n";
       valid = false;
    }    

    if ($('#email').val() == '') {
       errorMessage += "please enter your email\n";
       valid = false;
    } 

    if( !valid && errorMessage.length > 0){
       alert(errorMessage);
    }   
  });

ここでフィドルを操作する： http://jsfiddle.net/WF2J9/24/

お役に立てば幸いです。

3
maverickosama92

一度に1つのアラートのみを表示する場合は、条件ごとにvalidの状態を確認する必要があります。

$('#submit').on('click', function() {
    valid = true;   

    if (valid && $('#name').val() == '') {
        alert ("please enter your name");
        valid = false;
    }

    if (valid && $('#address').val() == '') {
        alert ("please enter your address");
         valid = false;
    }    

    return valid;
});

更新されたフィドル

3
Rory McCrossan

フォームの検証：

このコードは、jqueryを使用した単純なフォーム検証用に提供されています。これをフォームの検証に使用できます。

ありがとう

        <form action="" method="post" name="ContactForm" id="ContactForm1">
        <div id='message_post'></div>
        <div class="input-group"> <span class="input-group-addon"></span>
         <input type="text" name="fname" class="form-control" placeholder="First Name *">
         </div>
         <div class="input-group"> <span class="input-group-addon"></span>
         <input type="text"  name="lname" required="required" class="form-control" placeholder="Last Name *">
        </div>
         <div class="input-group"> <span class="input-group-addon"></span>
         <input type="text"  name="phone" required="required" class="form-control" placeholder="Phone (bh) *">
        </div>
        <div class="input-group"> <span class="input-group-addon"></span>
         <input type="text"  name="email" required="required" class="form-control" placeholder="Email *">
         </div>
         <div class="input-group"> <span class="input-group-addon"></span>
         <textarea rows="5"  name="message" required="required" class="form-control" placeholder="Message *"></textarea>
         </div>
         <div class="input-group form-buttons">
                    <span class="input-group-btn">
        <input type="submit" id="btn" name="buttn" value="Send Message"  class="btn btn-default"/><i class="fa fa-envelope"></i> 
        </span>
        </div>
        </form>

        <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
<script>

// just for the demos, avoids form submit

jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});
$( "#ContactForm1" ).validate({
  rules: {
            fname: "required",
            lname: "required",
            phone: "required",
            email: {
                required: true,
                email: true
            },

            message: "required",

  }
});
</script>
0
Prince Bhatt