如何使用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。

$('#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)如果你輸入一個錯誤。如果不與$("#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表單驗證，你的情況我會用「需要」的屬性，然後使用提交事件，而不是點擊你的preventDefault，然後用form.checkValidity功能看看它是否有效，在這個測試之後，你可以添加你自己的驗證並通過ajax發送數據而不是表單submition

Answer 4

使用JQuery驗證插件，你可以輕鬆實現這種驗證。此外，它提供了很多默認的驗證：

舉個例子：HTML使用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> 

驗證

$(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。最好的部分是驗證發生在飛行中。您不必提交表單。