我有以下联系表格如下。我想避免逐个表单验证并一次显示所有错误消息。
我使用的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>
答案 0 :(得分：0)
我的第一个想法是使用HTML5元素和所需的属性来改善您的表单，这会导致同样的问题，即在再次单击提交后一次只显示一个错误。
所以我尝试使用模式属性......同样的问题在这里。
TJ Van Toll找到了一个很好的解决方案，它可以解决你的问题，因为你使用JQuery是很好的： https://www.tjvantoll.com/2012/08/05/html5-form-validation-showing-all-error-messages/
此代码适用于
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script>
var createAllErrors = function() {
var form = $( this ),
errorList = $( "ul.errorMessages", form );
var showAllErrorMessages = function() {
errorList.empty();
// Find all invalid fields within the form.
var invalidFields = form.find( ":invalid" ).each( function( index, node ) {
// Find the field's corresponding label
var label = $( "label[for=" + node.id + "] "),
// Opera incorrectly does not fill the validationMessage property.
message = node.validationMessage || 'Invalid value.';
errorList
.show()
.append( "<li><span>" + node.name + "</span> " + message + "</li>" );
});
};
// Support Safari
form.on( "submit", function( event ) {
if ( this.checkValidity && !this.checkValidity() ) {
$( this ).find( ":invalid" ).first().focus();
event.preventDefault();
}
});
$( "input[type=submit], button:not([type=button])", form )
.on( "click", showAllErrorMessages);
$( "input", form ).on( "keypress", function( event ) {
var type = $( this ).attr( "type" );
if ( /date|email|month|number|search|tel|text|time|url|week/.test ( type )
&& event.keyCode == 13 ) {
showAllErrorMessages();
}
});
};
$( "form" ).each( createAllErrors );
</script><style>
#op
{
text-align : center;
}
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;}
</style><!DOCTYPE html>
<html>
<body>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<form id="contact" method="post">
<ul class="errorMessages"></ul>
<div id="formAppend"></div>
<input type="text" id="fname" name="firstname" placeholder="Το Όνομα σας..." required>
<input type="email" id="email" name="email" placeholder="Το Εmail σας..." required>
<select id="formCategory" name="TODEFINE" required>
<option id="fc" class="w3-center" value="" selected value>-- Κατηγορία --</option>
<option value="Εμβολιασμός">Εμβολιασμός</option>
<option value="Δέντρα">Δέντρα</option>
<option value="Φύση">Φύση</option>
<option value="Άλλη">Άλλη</option>
</select>
<textarea id="msg" name="message" placeholder="Γράψε το μήνυμα..." style="height:200px;max-height:400px;min-height:100px;" required></textarea>
<div id="op">
<div class="buttons">
<button style="" class="w3-button w3-indigo w3-round-medium w3-hover-amber "> Αποστολή</button>
</div>
</div>
</form>
</body>
</html>