【发布时间】：2021-06-26 12:47:44
【问题描述】：
我正在制作一个表单，其中使用 jQuery 进行客户端验证，然后在提交后使用 PHP 进行服务器端验证。我的问题是，通过使用 $("form").submit(function (e) {}，当我单击取消和删除按钮时，也会出现不应该出现的验证消息。我只希望验证仅在保存时发生按钮被点击了。还有其他方法可以做到这一点吗？非常感谢。 以下是我的代码：
<!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 forms validation button