JavaScript form validation code errors
Question
Here is my code:
<!DOCTYPE html>
<head>
<title>Tests</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf8'>
<script type="text/javascript">
function closeSign(){
document.getElementById('window_fler').style.display = 'none';
document.getElementById('wrap_fler').style.display = 'none';
}
function validate_fler(){
if (document.forms["fler_form"]["signDate"].value.length == 0) { return false };
if (document.forms["fler_form"]["signTime"].value.length == 0) { return false };
if (document.forms["fler_form"]["signFIO"].value.length == 0) { return false };
if (document.forms["fler_form"]["signPhone"].value.length == 0) { return false };
document.getElementById('window_fler').style.display = 'block';
document.getElementById('wrap_fler').style.display = 'block';
}
</script>
<style type="text/css">
#wrap_fler{
display: none;
opacity: 0.8;
position: fixed;
background-color: rgba(1, 1, 1, 0.725);
z-index: 100;
overflow: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
padding: 16px;
}
#window_fler{
height: 400px;
width: 400px;
display: none;
z-index: 200;
position: fixed;
margin: 150px auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
padding: 30px;
background: #fff;
}
</style>
</head>
<body>
<form role="form" name="fler_form" action="" data-email-subject="Contact Form" data-show-errors="true">
<div>
<label for="dayTime1">Выберите дату:</label>
<input name="signDate" type="text" placeholder="Пожалуйста, выберите дату" id="dayTime1" required>
</div>
<div>
<label for="hourTime">Выберите время:</label>
<select name="signTime" id="hourTime">
<option> </option>
<option value="10">10:00</option>
<option value="11">11:00</option>
<option value="12">12:00</option>
<option value="13">13:00</option>
<option value="14">14:00</option>
<option value="15">15:00</option>
<option value="16">16:00</option>
<option value="17">17:00</option>
<option value="18">18:00</option>
<option value="17">19:00</option>
<option value="18">20:00</option>
</select>
</div>
<div>
<label for="fio">Ваше имя и фамилия:</label>
<input name="signFIO" type="text" placeholder="Пожалуйста, введите Ваше имя и фамилию" id="fio" required>
</div>
<div>
<label for="phone">Номер телефона:</label>
<input name="signPhone" type="text" placeholder="Пожалуйста, введите Ваш номер телефона" id="phone" required>
</div>
<div>
<button type="submit" onclick="return validate_fler()">
<span>Записаться</span></button>
</div>
</form>
<div id="wrap_fler" onclick="closeSign()"></div>
<div id="window_fler">
<h3>
Ваша заявка принята. <br/>
В ближайшее время с вами свяжется администратор нашего салона, что бы подтвердить запись.
</h3>
<a href="#" onclick="closeSign()" style="margin: 30px 0 0 0;">ЗАКРЫТЬ</a>
</div>
</body>
</html>
I need to validate form for presence of all fields. Next I need to show to user the message in div window_fler . User can click the button to close the div. In my case when i click on button in the form I see message div is shown and quickly closed. Whats wrong in my code?
4 answers
solution1
2 2015-10-06 05:43:19
As Mayank pointed out, your form is being submitted on click of the button, which results in state change of your page.
<button type="submit" onclick="return validate_fler()">
<span>Записаться</span></button>
Try changing the type of this button to "button" and handle submit separately at some other point in your code.
<button type="button" onclick="return validate_fler()">
<span>Записаться</span></button>
You could try something like two separate buttons: 'Validate' and 'Submit Form'.
solution2
1 ACCPTED 2015-10-06 06:05:41
In below block , you are returning false only if fields are not valid. after showing the modal or popup return false, so the form will not be submitted.
function validate_fler() {
if (document.forms["fler_form"]["signDate"].value.length == 0) {
return false
};
if (document.forms["fler_form"]["signTime"].value.length == 0) {
return false
};
if (document.forms["fler_form"]["signFIO"].value.length == 0) {
return false
};
if (document.forms["fler_form"]["signPhone"].value.length == 0) {
return false
};
document.getElementById('window_fler').style.display = 'block';
document.getElementById('wrap_fler').style.display = 'block';
return false;// added this to prevent form submission
}
You didn't mention how you want to submit the form after showing a popup, so this is just a small fix to your problem. I'll update my post if you can say what actually you want to achieve
Submit Form Using AJAX (JQuery)
function SubmitForm() {
var datastring = $("[name=fler_form]").serialize();
alert(datastring)// this is the form data.
$.ajax({
type: "POST",
url: "#the url of server to send data",
data: datastring,
dataType: "json",
success: function(data) {
//var obj = jQuery.parseJSON(data); if the dataType is not specified as json uncomment this
// do what ever you want with the server response
},
error: function(errorObj) {
console.log(errorObj)
}
});
}
function closeSign() { document.getElementById('window_fler').style.display = 'none'; document.getElementById('wrap_fler').style.display = 'none'; } function validate_fler() { if (document.forms["fler_form"]["signDate"].value.length == 0) { return false }; if (document.forms["fler_form"]["signTime"].value.length == 0) { return false }; if (document.forms["fler_form"]["signFIO"].value.length == 0) { return false }; if (document.forms["fler_form"]["signPhone"].value.length == 0) { return false }; document.getElementById('window_fler').style.display = 'block'; document.getElementById('wrap_fler').style.display = 'block'; } function SubmitForm() { var datastring = $("[name=fler_form]").serialize(); alert(datastring) $.ajax({ type: "POST", url: "#the url of server to send data", data: datastring, dataType: "json", success: function(data) { //var obj = jQuery.parseJSON(data); if the dataType is not specified as json uncomment this // do what ever you want with the server response }, error: function(errorObj) { console.log(errorObj) } }); }
#wrap_fler { display: none; opacity: 0.8; position: fixed; background-color: rgba(1, 1, 1, 0.725); z-index: 100; overflow: auto; left: 0; right: 0; top: 0; bottom: 0; padding: 16px; } #window_fler { height: 400px; width: 400px; display: none; z-index: 200; position: fixed; margin: 150px auto; left: 0; right: 0; top: 0; bottom: 0; padding: 30px; background: #fff; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <form role="form" name="fler_form" action="" data-email-subject="Contact Form" data-show-errors="true"> <div> <label for="dayTime1">Выберите дату:</label> <input name="signDate" type="text" placeholder="Пожалуйста, выберите дату" id="dayTime1" required> </div> <div> <label for="hourTime">Выберите время:</label> <select name="signTime" id="hourTime"> <option> </option> <option value="10">10:00</option> <option value="11">11:00</option> <option value="12">12:00</option> <option value="13">13:00</option> <option value="14">14:00</option> <option value="15">15:00</option> <option value="16">16:00</option> <option value="17">17:00</option> <option value="18">18:00</option> <option value="17">19:00</option> <option value="18">20:00</option> </select> </div> <div> <label for="fio">Ваше имя и фамилия:</label> <input name="signFIO" type="text" placeholder="Пожалуйста, введите Ваше имя и фамилию" id="fio" required> </div> <div> <label for="phone">Номер телефона:</label> <input name="signPhone" type="text" placeholder="Пожалуйста, введите Ваш номер телефона" id="phone" required> </div> <div> <button type="button" onclick="return validate_fler()"> <span>Записаться</span> </button> </div> </form> <div id="wrap_fler" onclick="closeSign()"></div> <div id="window_fler"> <h3> Ваша заявка принята. <br/> В ближайшее время с вами свяжется администратор нашего салона, что бы подтвердить запись. </h3> <a href="#" onclick="closeSign()" style="margin: 30px 0 0 0;">ЗАКРЫТЬ</a> <button type="button" onclick="SubmitForm()"> <span>Submit</span> </button> </div> </body>
solution3
0 2015-10-06 05:37:42
Try
if (document.forms["fler_form"]["signDate"].value.length == 0 ||
document.forms["fler_form"]["signTime"].value.length == 0 ||
document.forms["fler_form"]["signFIO"].value.length == 0 ||
document.forms["fler_form"]["signPhone"].value.length == 0) {
document.getElementById('window_fler').style.display = 'block';
document.getElementById('wrap_fler').style.display = 'block';
};
return false doesn't make any sense there and it won't execute statements after it. If a condition is true, you have to execute display:block;
solution4
0 2015-10-06 05:43:38
Replace your <button type="submit" onclick="return validate_fler()"> <span>Записаться</span></button>
by
<input type="button" onclick="return validate_fler()">
<span>Записаться</span></input>
Try this.This wont submit your form so you can get yours js code work properly.I have just given solution for what you have asked for.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Javascript form validation errors
Javascript form validation submit errors
Javascript Subscribe Form Validation Errors
Javascript form validation not displaying errors
JavaScript Form onkeyup Validation Errors
error in form validation code in javascript
Meaning of JavaScript form validation code?
Simplify Javascript code for form validation
JavaScript - How to hide errors on Form Validation
JavaScript form validation isn't checking for errors
Related Tags