【发布时间】：2017-08-16 14:08:36
【问题描述】：
我有以下联系表格，如下所示。我想避免一一进行表单验证并一次显示所有错误消息。
我使用了太多的 if 语句来做到这一点，但验证是一一发生的。
例如，当用户在没有输入姓名和电子邮件的情况下提交表单时，两个错误都应该同时出现（姓名丢失，电子邮件丢失）。不是名字，然后是电子邮件。
对不起，示例是希腊语，我希望浏览器翻译器能正常工作。
var form = $('#contact');
form.submit(function (event) {
event.preventDefault();
var complete = $('#formAppend');
// var $form = $(this);
var name= $("#fname").val();
var email= $("#email").val();
var Message = $("#msg").val();
var formCat = $("#formCategory").val();
if(email ==="" && Message ==="" && formCat ==="" && name==="" )
{
$("#fname").css({"border": "3px solid red"});
$("#fname").attr("placeholder", "Ξεχάσατε το όνομα σας").css({"font-weight":"bold"});
$("#email").css({"border": "3px solid red"});
$("#email").attr("placeholder", "Ξεχάσατε το email σας").css({"font-weight":"bold"});
$("#msg").css({"border": "3px solid red"});
$("#msg").attr("placeholder", "Το μήνυμα σας είναι υποχρεωτικό").css({"font-weight":"bold"});
$("#formCategory").css({"border": "3px solid red"});
$("#fc").html("<span style='color:red;'>Επιλέξτε μια κατηγορία</span>");
return false;
}
if(name==="")
{
$("#fname").css({"border": "3px solid red"});
$("#fname").attr("placeholder", "Ξεχάσατε το όνομα σας").css({"font-weight":"bold"});
return false;
}
if(email ==="")
{
$("#email").css({"border": "3px solid red"});
$("#email").attr("placeholder", "Ξεχάσατε το email σας").css({"font-weight":"bold"});
return false;
}
if(Message ==="")
{
$("#msg").css({"border": "3px solid red"});
$("#msg").attr("placeholder", "Το μήνυμα σας είναι υποχρεωτικό").css({"font-weight":"bold"});
return false;
}
if(formCat ==="")
{
$("#formCategory").css({"border": "3px solid red"});
$("#fc").html("<span style='color:red;'>Eπιλέξτε μια κατηγορία</span>");
return false;
}
else
{
$.ajax({
type: 'POST',
url: '../sendemail.php',
dataType: 'json',
data: {
Name: name,
Email: email,
message: Message,
formCategory : formCat
},
beforeSend: function () {
complete.html('<i class="material-icons w3-spin w3-text-indigo" style="font-size:36px">toys</i> Αποστολή <i class="w3-text-indigo material-icons w3-spin" style="font-size:36px">toys</i>').fadeIn();
}
})//end ajax
.done(
function (data) {
if(data.MessageSent)
{
//if phpmailer sent is true
complete.html("<div id='msgSent' class='w3-panel w3-green w3-display-container'>\n\
<span class='w3-button w3-green w3-large w3-display-topright' onclick='closemsg()'>x</span>\n\
<h3>Μήνυμα εστάλη με επιτυχία! <i style='font-size:33px;' class='material-icons'>done</i></h3> <p>Ευχαριστούμε για το μήνυμα σας. Θα το διαβάσουμε σύντομα και θα σας απαντήσουμε\n\
στο ακόλουθο email: <span class='w3-tag w3-indigo w3-hover-text-indigo w3-hover-white w3-round '>"+email+"</span></p> </div>");
document.getElementById("fname").value = "";
document.getElementById("email").value = "";
document.getElementById("formCategory").value = "";
document.getElementById("msg").value = "";
$("#fname").css({"border": "1px solid #ccc"});
$("#fname").attr("placeholder", "Το Όνομα σας...").css({"font-weight":"normal"});
$("#email").css({"border": "1px solid #ccc"});
$("#email").attr("placeholder", "Το Εmail σας...").css({"font-weight":"normal"});
$("#msg").css({"border": "1px solid #ccc"});
$("#msg").attr("placeholder", "Γράψε το μήνυμα...").css({"font-weight":"normal"});
$("#formCategory").css({"border": "1px solid #ccc"});
$("#fc").html("-- Κατηγορία --").css({"font-weight":"normal"});
}
else {//if phpmailer sent is false
complete.html("<div id='msgSent' class='w3-panel w3-red w3-display-container'><span class='w3-button w3-red w3-opacity w3-large w3-display-topright' \n\
onclick='closemsg()'>x</span><h3>Αποτυχία αποστολής μηνύματος <i style='font-size:33px;' class= ' material-icons'>error_outline</i> </h3> \n\
<p>Δυστηχώς το μήνυμα σας δεν εστάλη με επιτυχία. Παρακαλώ εποικηνωνήστε μαζί μας μέσω facebook στον ακόλουθο σύνδεσμο: <a target='_blank' \n\
class='w3-tag w3-white' href='https://m.me/graftingInCyprus'>εδώ</a><br>Το Μήνυμα σας: <span class='w3-indigo w3-tag '>"+Message+"</p> </div>");
}
} //end function data
);//end done function
return true;
}
});//end contact form
function closemsg()
{
$('#msgSent').hide();
}input[type=text], input[type=email], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
style.css:1
button, select {
text-transform: none;
}
style.css:1
button, input, select, textarea {
font: inherit;
margin: 0;}
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<form id="contact" method="post" action="#ss">
<div id="formAppend"></div>
<input type="text" id="fname" name="firstname" placeholder="Το Όνομα σας..." >
<input type="email" id="email" name="email" placeholder="Το Εmail σας..." >
<select id="formCategory" >
<option id="fc" class="w3-center" value="" selected value>-- Κατηγορία --</option>
<option value="Εμβολιασμός">Εμβολιασμός</option>
<option value="Δέντρα">Δέντρα</option>
<option value="Φύση">Φύση</option>
<option value="Άλλη">Άλλη</option>
</select>
<style>
#op{
text-align : center;
} </style>
<textarea id="msg" name="message" placeholder="Γράψε το μήνυμα..." style="height:200px;max-height:400px;min-height:100px;" ></textarea>
<div id="op">
<button type="submit" style="" class="w3-button w3-indigo w3-round-medium w3-hover-amber "> Αποστολή</button> </div>
</form>【问题讨论】：
-
当问题与此插件无关时，请不要使用 jQuery Validate 标签。已编辑。
-
如果您将所有这些 return 语句从验证函数中取出并在最后仅替换为 1 个 return 语句，您可以找到所有输入字段错误并让用户在 1 次中知道。但是，如果您在发现第一个输入字段验证错误后立即从函数返回（在您验证每个字段之前），则可能存在无效的表单字段，在用户修复之前检查的字段值之前您不会捕获这些字段。
标签： javascript jquery validation form-submit