how to make javascript alert not run until all required fields are filled
Question
I have created a Signup form. I need some help as i am new to web development. The Problem is that When I press submit button. javascript alert runs. even when all fields are not filled.I want that javascript alert (which is function Data()) not run until all required fields are filled.
JavaScript Code
<script>
function Data() {
alert("User ID: " + textfield1.value + '\n' + "Password: " + textfield2.value + '\n' + "Conform Password: " + textfield3.value + '\n' + "First Name: " + textfield4.value + '\n' + "Last Name: " + textfield5.value + '\n' + "Email: " + textfield6.value + '\n' + "Company: " + textfield7.value + '\n' + "Phone: " + textfield8.value + '\n' + "Fax: " + textfield9.value + '\n' + "Address Line 1: " + textfield10.value + '\n' + "Address Line 2: " + textfield11.value + '\n' + "City: " + textfield12.value + '\n' + "State/Province: " + textfield13.value + '\n' + "Country: " + textfield14.value + '\n' + "Zip/Postal Code: " + textfield15.value + '\n');
{
if (input.value != document.getElementById('password').value) {
alert('Password Must be Matching.');
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
}
function inputnumber(evt) {
var limit = (evt.which) ? evt.which : event.keyCode
if (limit > 31 && (limit < 48 || limit > 57)) {
alert("Enter numerals only in this field.");
return false;
}
return true;
}
function checkPass() {
var inputpassword = document.getElementById("textfield2");
var conformpassword = document.getElementById("textfield3");
var message = document.getElementById("confirmMessage");
var goodpassword = "#66cc66";
var badpassword = "#ff6666";
if (inputpassword.value == conformpassword.value) {
conformpassword.style.borderColor = goodpassword;
message.style.color = goodpassword;
message.innerHTML = "Password Match!"
}
else {
conformpassword.style.borderColor = badpassword;
message.style.color = badpassword;
message.innerHTML = "Password Do Not Match!"
}
}
</script>
<body>
<form autocomplete="on">
<h1 style="text-align: center">
Signup Form</h1>
<table align="center">
<tr>
<td>
User ID
</td>
<td>
<input type="text" id="textfield1" style="border-radius: 7px; border: 2px solid #dadada;"
autofocus required />
</td>
</tr>
<tr>
<td>
Password<sup>*</sup>
</td>
<td width="50%">
<input type="password" maxlength="10" id="textfield2" style="border-radius: 7px;
border: 2px solid #dadada;" required />
</td>
</tr>
<tr>
<td>
Conform Password
</td>
<td>
<input type="password" maxlength="10" id="textfield3" onkeyup="checkPass()" style="border-radius: 7px;
border: 2px solid #dadada;" required /><span id="confirmMessage"></span>
</td>
</tr>
<tr>
<td>
First Name
</td>
<td>
<input type="text" id="textfield4" style="border-radius: 7px; border: 2px solid #dadada;"
required />
</td>
</tr>
<tr>
<td>
Last Name
</td>
<td>
<input type="text" id="textfield5" style="border-radius: 7px; border: 2px solid #dadada;"
required />
</td>
</tr>
<tr>
<td>
Email
</td>
<td>
<input type="email" id="textfield6" style="border-radius: 7px; border: 2px solid #dadada;"
required />
</td>
</tr>
<tr>
<td>
Company
</td>
<td>
<input type="text" id="textfield7" style="border-radius: 7px; border: 2px solid #dadada;" />
</td>
</tr>
<tr>
<td>
Phone
</td>
<td>
<input type="text" id="textfield8" onkeypress="return inputnumber(event)" style="border-radius: 7px;
border: 2px solid #dadada;" required />
</td>
</tr>
<tr>
<td>
Fax
</td>
<td>
<input type="text" id="textfield9" onkeypress="return inputnumber(event)" style="border-radius: 7px;
border: 2px solid #dadada;" />
</td>
</tr>
<tr>
<td>
Address Line 1
</td>
<td>
<input type="text" id="textfield10" style="border-radius: 7px; border: 2px solid #dadada;"
required />
</td>
</tr>
<tr>
<td>
Address Line 2
</td>
<td>
<input type="text" id="textfield11" style="border-radius: 7px; border: 2px solid #dadada;" />
</td>
</tr>
<tr>
<td>
City
</td>
<td>
<input type="text" id="textfield12" style="border-radius: 7px; border: 2px solid #dadada;"
required />
</td>
</tr>
<tr>
<td>
State/Province
</td>
<td>
<input type="text" id="textfield13" style="border-radius: 7px; border: 2px solid #dadada;"
required />
</td>
</tr>
<tr>
<td>
Country
</td>
<td>
<input type="text" id="textfield14" style="border-radius: 7px; border: 2px solid #dadada;"
required />
</td>
</tr>
<tr>
<td>
Zip/Postal Code
</td>
<td>
<input type="text" id="textfield15" onkeypress="return inputnumber(event)" style="border-radius: 7px;
border: 2px solid #dadada;" required />
</td>
</tr>
<tr>
<td>
<div align="center">
<input type="submit" value="Submit!" onclick="Data()" style="border-radius: 7px;
border: 2px solid #dadada;" /></div>
</td>
<td>
<div align="center">
<input type="reset" value="Reset" style="border-radius: 7px; border: 2px solid #dadada;" /></div>
</td>
</tr>
</table>
</form>
2 answers
solution1
0 ACCPTED 2014-10-03 12:26:33
Try that:
<form autocomplete="on" onsubmit="Data()">
And remove that from submit button:
<input type="submit" value="Submit!" style="border-radius: 7px;border: 2px solid #dadada;" />
Explanation:
When you use click on button, it will always fire, because it's click. If you use submit on form, then it is fired only when form is submitted, which means it's correct and has all required fields filled
UPDATE
In case if you want to run some additional custom validation (like password confirmation), and find form invalid and want to STOP submit process, use this hint:
function Data(e) { //"e" - is an event object, that is being populated on form's submit
if (input.value != document.getElementById('password').value) {
alert('Password Must be Matching.');
e.stopPropagation(); //These two rows KILL the event, so it will not be submited
e.preventDefault();
}
}
solution2
0 2014-10-03 12:37:09
You should check to make sure each textbox has something in it with a series of if else statements.
Ex.
if(!document.getElementById("yourtextbox").value.match(/\S/))
{
window.alert("You must enter a value for yourtextbox");
}
else
{
if(!document.getElementById("anothertextbox").value.match(/\S/))
{
window.alert("You must enter a value for anothertextbox");
}
else
{
alert("User ID: " + textfield1.value + '\n' + "Password: " + textfield2.value + '\n' + "Conform Password: " + textfield3.value + '\n' + "First Name: " + textfield4.value + '\n' + "Last Name: " + textfield5.value + '\n' + "Email: " + textfield6.value + '\n' + "Company: " + textfield7.value + '\n' + "Phone: " + textfield8.value + '\n' + "Fax: " + textfield9.value + '\n' + "Address Line 1: " + textfield10.value + '\n' + "Address Line 2: " + textfield11.value + '\n' + "City: " + textfield12.value + '\n' + "State/Province: " + textfield13.value + '\n' + "Country: " + textfield14.value + '\n' + "Zip/Postal Code: " + textfield15.value + '\n');
{
if (input.value != document.getElementById('password').value) {
alert('Password Must be Matching.');
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
}
}
Just validate that your text fields are not empty before calling your alert. Change your submit button type from "submit" to "button".
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 disable button until all fields are filled
How to Disable button until required fields are filled without using javascript, just HTML5 and CSS
How to make either all fields in a object required for filling or none of the fields in a object to be filled at all?
How to disable a button until all the input fields are filled using only JavaScript?
How to submit for after all the fields are filled in JavaScript
How to prevent default submission when ALL required fields are filled in
how to disable a button unti all the required fields are filled
How to check if all required fields are filled to enable submit button?
javascript - Make all fields on a form required
Check if all required fields are filled in a specific div
Related Tags