静态表单上的 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>

我的 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>