仅保存按钮上的 jQuery 表单验证
Posted
技术标签:
【中文标题】仅保存按钮上的 jQuery 表单验证【英文标题】：jQuery Form Validation on only Save button 【发布时间】：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>
【问题讨论】：
【参考方案1】：你的问题是按钮的默认类型是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>【讨论】：
嗨，谢谢大家的回复。我也希望提交其他按钮，因为我需要发送 POST 请求并从数据库中获取列表按钮的数据。我所做的是将 $("form").submit 替换为 $("#save").click 以仅选择保存按钮并且它可以工作，因此其他按钮在提交时不会有验证消息...【参考方案2】：如果您喜欢链接，请这样做
<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"
<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>
因为每个按钮的默认设置都是提交。这就是为什么您的错误消息总是被触发的原因
【讨论】：
如果按钮是按钮，请不要将按钮更改为链接，这是非常糟糕的建议。 我认为如果他想取消表单，他将链接到另一个页面并且列表与表单无关。所以这就是我要链接的原因。 如果它是指向另一个页面的链接，那么当然，使用链接。但我认为这些应该是按钮。万一我错了，OP真的想链接到其他地方，我道歉！ 让我们看看他想要什么:-)以上是关于仅保存按钮上的 jQuery 表单验证的主要内容，如果未能解决你的问题，请参考以下文章