我正在制作一个表单，其中使用jQuery进行客户端验证，然后在提交后使用PHP进行服务器端验证。我的问题是，通过使用$("form"(.submit(函数(e(｛｝，当我单击"取消"one_answers"删除"按钮时，验证消息也会出现，而这不应该出现。我只希望只有在单击"保存"按钮时才能进行验证。我还有别的办法吗？非常感谢。以下是我的代码：
<!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>
您的问题是按钮的默认类型是submit，因此通过使用<button> Cancel </button>，您也将此按钮声明为提交按钮，从而触发表单的提交功能。
要解决此问题，请将非提交按钮的类型设置为button(您可以省略提交类型，因为这是默认值(
现在，您可以根据需要处理取消和列表按钮的逻辑：
<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>
//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;
}
});<!--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">
<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 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>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>如果你喜欢链接，就这样做
<button type="submit" class="btn btn-primary" id="save" name="save">Save</button>
<a href="#" class="btn btn-warning" id="cancel" name="cancel">Cancel</a>
<a href="#" class="btn btn-success" id="list" name="list">List</a>
如果你喜欢纽扣。只需添加type="按钮"；
<button type="submit" 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>
因为每个按钮的默认值都是提交。这就是为什么你的错误信息总是被触发