靜態表單上的jQuery驗證

Question

我正在使用ajax和JSON將信息檢索到表單中。但是，用戶可以編輯這些字段，但新數據不會去任何地方。我需要對字段進行驗證，但不知道如何在不添加HTML表單中的「操作」部分中添加外部文件的情況下工作。謝謝你的幫助。

我的HTML

<form id="summary" method="get" action=""> 
<h2>Summary Form</h2> 


<label for="firstname">First Name</label> 
<input type="text" name="firstname" id="firstname" placeholder="First name"/> 

<label for="lastname">Last Name</label> 
<input type="text" name="lastname" id="lastname" placeholder="Last Name"/> 

<label for="email">Email</label> 
<input type="email" name="email" id="email" placeholder="Email"/> 

<label for="roomtype">Room Type</label> 
<input type="text" name="roomtype" id="roomtype" placeholder="Room Type"/> 

<div id="datepicker"></div> 
<label for="checkin">Checkin</label> 
<input type="text" name="checkin" id="checkin" placeholder=" Check in"/> 

<label for="checkout">Checkout</label> 
<input type="text" name="checkout" id="checkout" placeholder=" Check out"/> 

<label for="noofnights">Number of nights</label> 
<input type="number" name="noofnights" id="noofnights" placeholder="Number of nights"/> 

<label for="totalstay">Total Stay </label> 
<input type="number" name="totalstay" id="totalstay" placeholder="Total stay"/> 

<button type="button">Update</button> 
<button type="button" id="button1">Book</button> 

MY jQuery驗證

$(function() { 


$("form[id='summary']").validate({ 

rules: { 

    firstname: "required", 
    lastname: "required", 
    email: { 
    required: true, 

    email: true 
    }, 
}, 
// validation error messages 
messages: { 
    firstname: "Please enter your firstname", 
    lastname: "Please enter your lastname", 
    email: "Please enter a valid email address" 
}, 


submitHandler: function(form) { 
    form.submit(); 
} 
}); 
}); 

Answer 1

如果你改變了按鈕式提交它將很好地工作

。希望這可以幫助 ：）。請參考下面的代碼spinets

<form id="summary" method="get" action=""> 
<label for="firstname">First Name</label> 
<input type="text" name="firstname" id="firstname" placeholder="First name" /> 
<label for="lastname">Last Name</label> 
<input type="text" name="lastname" id="lastname" placeholder="Last Name" /> 
<label for="email">Email</label> 
<input type="email" name="email" id="email" placeholder="Email" /> 
<label for="roomtype">Room Type</label> 
<input type="text" name="roomtype" id="roomtype" placeholder="Room Type" /> 
<div id="datepicker"></div> 
<label for="checkin">Checkin</label> 
<input type="text" name="checkin" id="checkin" placeholder=" Check in" /> 
<label for="checkout">Checkout</label> 
<input type="text" name="checkout" id="checkout" placeholder=" Check out" /> 
<label for="noofnights">Number of nights</label> 
<input type="number" name="noofnights" id="noofnights" placeholder="Number of nights" /> 
<label for="totalstay">Total Stay </label> 
<input type="number" name="totalstay" id="totalstay" placeholder="Total stay" /> 
<!-- <button type="button">Update</button> --> 
<!-- this change makes it work --> 
<button type="submit">Update</button> 

<button type="button" id="button1">Book</button> 
<form/> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script> 
<script> 
$(function() { 

    $("form[id='summary']").validate({ 

     rules: { 

      firstname: "required", 
      lastname: "required", 
      email: { 
       required: true, 

       email: true 
      }, 
     }, 
     // validation error messages 
     messages: { 
      firstname: "Please enter your firstname", 
      lastname: "Please enter your lastname", 
      email: "Please enter a valid email address" 
     }, 


     submitHandler: function(form) { 
      form.submit(); 
     } 
    }); 
}); 
</script>