仅保存按钮上的jQuery表单验证
我正在制作一个表单，其中使用jQuery进行客户端验证，然后在提交之后使用PHP进行服务器端验证。我的问题是，通过使用$（“form”）.submit（函数（e）{}，当我单击“取消”和“删除”按钮时，验证消息也会出现，这是不应该出现的。我只希望验证只在单击“保存”按钮时发生。是否有其他方法可以做到这一点？非常感谢。 下面是我的代码：仅保存按钮上的jQuery表单验证,jquery,forms,validation,button,Jquery,Forms,Validation,Button,我正在制作一个表单，其中使用jQuery进行客户端验证，然后在提交之后使用PHP进行服务器端验证。我的问题是，通过使用$（“form”）.submit（函数（e）{}，当我单击“取消”和“删除”按钮时，验证消息也会出现，这是不应该出现的。我只希望验证只在单击“保存”按钮时发生。是否有其他方法可以做到这一点？非常感谢。 下面是我的代码： <!DOCTYPE html> <html lang="en"> <head> &
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<title>Contact Form</title>
</head>
<body>
<div class="container">
<!--Display error message or success message, both won't happen same time-->
<div id="error"><? echo $message; ?></div>
<form method="post" id="myform">
<div class="form-group">
<label for="surname">Surname</label>
<input type="text" class="form-control" id="surname" name="surname">
</div>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name">
</div>
<div class="form-group">
<label for="address">Address</label>
<input type="text" class="form-control" id="address" name="address">
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" class="form-control" id="email" name="email">
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" id="male" name="gender" value="Male"> Male
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" id="female" name="gender" value="Female"> Female
</label>
</div>
<div class="form-group">
<label for="telephone">Telephone Number</label>
<input type="number" class="form-control" id="telephone" name="telephone">
</div>
<button type="submit" class="btn btn-primary" id="save" name="save">Save</button>
<button class="btn btn-warning" id="cancel" name="cancel">Cancel</button>
<button class="btn btn-success" id="list" name="list">List</button>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
<script type="text/javascript">
//When Save button is clicked, stop form submitting and run validation using jQuery
$("form").submit(function (e) {
var errorMessage = "";
if($("#surname").val() == "") {
errorMessage += "Please input a surname.<br>" //If field is empty, append to errorMessage string
}
if($("#name").val() == "") {
errorMessage += "Please input a name.<br>"
}
if($("#address").val() == "") {
errorMessage += "Please input an address.<br>"
}
if($("#email").val() == "") {
errorMessage += "Please input an email address.<br>"
}
if((!($('#male').prop('checked'))) && (!($('#female').prop('checked')))) {
errorMessage += " Please input a gender.<br>";
}
if($("telephone").val() == "") {
errorMessage += "Please input a telephone number.<br>"
}
//If there is an error message
if(errorMessage != "") {
//Set html to display error message
$("#error").html('<div class="alert alert-danger" role="alert"><p>Please fill your form:</p>' + errorMessage + '</div>');
return false; //Don't submit the form
} else {
//Submit the form if no error
return true;
}
});
</script>
</body>
</html>
联系方式
姓
名称
地址
电子邮件地址
男性
女性
电话号码
拯救
取消
列表
//单击保存按钮后，停止表单提交并使用jQuery运行验证
$（“表格”）。提交（功能（e）{
var errorMessage=“”；
如果（$（“#姓氏”）.val（）==”）{
errorMessage+=“请输入姓氏。
”//如果字段为空，请附加到errorMessage字符串
}
如果（$（“#名称”）.val（）==”）{
errorMessage+=“请输入一个名称。
”
}
如果（$（“#地址”）.val（）==”）{
errorMessage+=“请输入地址。
”
}
如果（$（“#email”）.val（）=”）{
errorMessage+=“请输入电子邮件地址。
”
}
如果（！（$（'男'）.prop（'checked'））和（！（$（'女'）.prop（'checked'））{
errorMessage+=“请输入性别。
”；
}
如果（$（“电话”）.val（）==“”）{
errorMessage+=“请输入电话号码。
”
}
//如果有错误消息
如果（errorMessage！=“”）{
//设置html以显示错误消息
$（“#error”）.html（“请填写您的表格：”+errorMessage+”）；
return false；//不提交表单
}否则{
//如果没有错误，请提交表格
返回true；
}
});
保存
保存
取消
列表
因为每个按钮的默认值都是submit。这就是为什么您的错误消息总是被触发的原因。您的问题是，按钮的默认类型是
submitCancel按钮<button class="btn btn-primary" id="save" name="save">Save</button>
<button type="button" class="btn btn-warning" id="cancel" name="cancel">Cancel</button>
<button type="button" class="btn btn-success" id="list" name="list">List</button>
保存
取消
列表
//单击保存按钮时，停止表单提交并使用jQuery运行验证
$（“表格”）。提交（功能（e）{
var errorMessage=“”；
如果（$（“#姓氏”）.val（）==”）{
errorMessage+=“请输入姓氏。
”//如果字段为空，请附加到errorMessage字符串
}
如果（$（“#名称”）.val（）==”）{
errorMessage+=“请输入一个名称。
”
}
如果（$（“#地址”）.val（）==”）{
errorMessage+=“请输入地址。
”
}
if（$（“#电子邮件”）.val（）=”“）{
errorMessage+=“请输入电子邮件地址。
”
}
如果（！（$（'男'）.prop（'checked'））和（！（$（'女'）.prop（'checked'））{
errorMessage+=“请输入性别。
”；
}
如果（$（“电话”）.val（）==“”）{
errorMessage+=“请输入电话号码。
”
}
//如果有错误消息
如果（errorMessage！=“”）{
//设置html以显示错误消息
$（“#error”）.html（“请填写您的表格：”+errorMessage+”）；
return false；//不提交表单
}否则{
//如果没有错误，请提交表格
返回true；
}
})；
姓
名称
地址
电子邮件地址
男性
女性
电话号码