jqueryを使用して動的フォームフィールドを検証する方法は？

Question

私は複数の入力とドロップダウンフィールドを持つフォームを持っています。提出する前に確認が必要です。だから、私は、フォームがSubmitまたはCancelにより提出を確認するためのダイアログボックスを追加したと私は提出し、デフォルトを回避しました。今

、私は働いていないjqueryを使用して入力を検証するカスタム関数を使用します。

<form class="form-horizontal" action="{{URL::to('quick/make/reservation')}}" method="post" role="form" id="confirm_request"> 

    <input type="text" name="contact" id="contact"> 
    <span id="error"> 
    </span> 
    <a class="btn btn-default" data-toggle="modal" data-target="#confirm-verify" id="done">Done</a> 
</form> 
<div class="modal fade bd-example-modal-sm" id="confirm-verify" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <p class="text-left bold-text">Are you sure you want to Complete Reservation ?</p> 
     </div> 
     <div class="modal-body"> 
      <a type="button" class="btn btn-xs btn-danger btn-ok btn-sm" onclick="event.preventDefault(); 
        document.getElementById('confirm_request').submit();" style="cursor: pointer;">Submit</a> 
      <a type="button" class="btn btn-xs btn-primary btn-sm" data-dismiss="modal">Cancel</a> 
     </div> 
    </div> 
    </div> 
</div> 

空のデータが送信されました：私はこのような入力フィールドを作成しても

。私はJQueryに全く新しいです。

$('#done').click(function(event){ 
     var is_filled = true; 
     var value = $('#contact').val(); 
     if(!value){ 
      is_filled = false; 
     } 

     if(!is_filled){ 
      event.preventDefault(); 
      $('#error').append('<strong>The field is required </strong>') 
     } 

    }); 

誰もが私が間違っていると思いますか？

Answer 1

私はいくつかのコードを変更したコードの例です。私はそれがうまくいくことを望む。あなたのコードに以下の変更を加えました。ポップアップは、コードが検証されていても開きますので

1. は、あなたのDoneボタンからdata-toggle="modal" data-target="#confirm-verify"を削除しました。
2. ポップアップのSubmitボタンからevent.preventDefault();を削除しました。
3. 他の条件でポップアップ$("#confirm-verify").modal("show");を開くためのコードを追加しました。

これで、テキストボックスに値を入力していないと、検証され、ポップアップが開きません。テキストボックスの終わりに何かを入力すると、「完了」ボタンをクリックすると、値を入力したのでポップアップが開きます。

ポップアップのSubmitボタンをクリックした後、特定のURLに提出します。代わりに、クリックのイベントを提出するとのpreventDefaultは、その後にform.checkValidity機能を使用しない

$('#done').click(function(event){ 
 
\t var is_filled = true; 
 
\t var value = $('#contact').val(); 
 
\t if(!value){ 
 
\t \t is_filled = false; 
 
\t } 
 

 
\t if(!is_filled){ 
 
\t \t event.preventDefault(); 
 
\t \t 
 
\t \t $('#error').html('<strong>The field is required </strong>') 
 
\t \t 
 
\t } else { 
 
\t \t $("#confirm-verify").modal("show"); 
 
\t } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<form class="form-horizontal" action="get-data" method="post" role="form" id="confirm_request"> 
 
{{csrf_field()}} 
 
    <input type="text" name="contact" id="contact"> 
 
    <span id="error"> 
 
    </span> 
 
    <a class="btn btn-default" href="javascript:;" id="done">Done</a> 
 
</form> 
 
<div class="modal fade bd-example-modal-sm" id="confirm-verify" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <p class="text-left bold-text">Are you sure you want to Complete Reservation ?</p> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <a type="button" class="btn btn-xs btn-danger btn-ok btn-sm" onclick="document.getElementById('confirm_request').submit();" style="cursor: pointer;">Submit</a> 
 
      <a type="button" class="btn btn-xs btn-primary btn-sm" data-dismiss="modal">Cancel</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

私はあなたの入力に関するエラーがある場合は無効には$("#submit").attr("disabled",true)で送信ボタンを作成することをお勧め。そうでない場合は、あなたの入力がnullの場合は、エラーを追加することができますし、そうでない場合は、あなたがスニペットを次のようなエラー・テキストを削除することができます$("#submit").attr("disabled",false)

を可能にします。ここで

$('#done').click(function(event){ 
 
     var value = $('#contact').val(); 
 

 
     if(!value){ 
 
      $("#submit").attr("disabled",true); 
 
      $('#error').append('<strong style="color:red">The field is required </strong>') 
 
     } 
 
     else 
 
     { 
 
      $("#submit").attr("disabled",false); 
 
      $("#error strong").remove(); 
 
     } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<form class="form-horizontal" method="post" role="form" id="confirm_request"> 
 

 
    <input type="text" name="contact" id="contact"> 
 
    <span id="error"> 
 
    </span> 
 
    <a class="btn btn-default" data-toggle="modal" data-target="#confirm-verify" id="done">Done</a> 
 
</form> 
 
<div class="modal fade bd-example-modal-sm" id="confirm-verify" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <p class="text-left bold-text">Are you sure you want to Complete Reservation ?</p> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <input value="Submit" type="button" id="submit" class="btn btn-xs btn-danger btn-ok btn-sm" onclick="" style="cursor: pointer;"></input> 
 
      <input value="Cancel" type="button" class="btn btn-xs btn-primary btn-sm" data-dismiss="modal"></input> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

あなたはHTML5フォーム検証を使用することができ、あなたのケースでは、私は、その後、使用する属性「必要」を使用しますそれが有効かどうかを確認するには、このテストの後に独自の検証を追加し、フォームサブミットの代わりにajax経由でデータを送信することができます。

Answer 4

JQueryの検証プラグインを使用すると、一例として、

：HTMLここ

$(document).ready(function() { $("#form").validate({ rules: { "name": { required: true, minlength: 5 }, "email": { required: true, email: true } }, messages: { "name": { required: "Please, enter a name" }, "email": { required: "Please, enter an email", email: "Email is invalid" } }, submitHandler: function (form) { // for demo alert('valid form submitted'); // for demo return false; // for demo } });}); 

がJSFiddle demoあるjQueryの

を使用して

<form id="form" method="post" action="#"> 
<label for="name">Name</label> 
<input type="text" name="name" id="name" /><br/> 
<label for="email">Email</label> 
<input type="email" name="email" id="email" /> 
<button type="submit">Submit</button> 

検証をまた、それは、デフォルトの検証の多くを提供します。最も重要な部分は、検証が実行中に行われることです。フォームを提出する必要はありません。