When I am doing JavaScript alert after that value is been null from the input text. But I want that after the JavaScript alert value should be available in the input text.
Here is my code
<script>
function validateform() {
var email = $('#txt_emailID').val();
if (email == null || email == "") {
alert("Email Should Be Complusory");
return false;
}
var atposition = email.indexOf("#");
var dotposition = email.lastIndexOf(".");
if (atposition < 1 || dotposition < atposition + 2 || dotposition + 2 >= email.length) {
alert("Please enter a valid e-mail address...!!!");
return false;
}
}
</script>
<label for="fname">Name</label>
<input type="text" id="txt_name" name="txt_name" placeholder="Your Name.." />
<label for="lname">EmailID</label>
<input type="text" id="txt_emailID" name="email" placeholder="Your EmailID.." />
<label for="lname">Subject</label>
<input type="text" id="txt_subject" name="txt_subject" placeholder="Your Subject.." />
<input type="submit" id="submit_mail" value="Send" />
<script>
$(function () {
$(document).on("click", "#submit_mail", function () {
if (validateform() == false) {
document.getElementById("txt_name").value = $('#txt_name').val();
document.getElementById("txt_subject").value = $('#txt_subject').val();
}
else {
}
});
});
I don't know where I am getting a problem.
You should prevent default action of submit button which is to submit the form.
Use Event.preventDefault();
function validateform() {
var email = $('#txt_emailID').val();
if (email == null || email == "") {
alert("Email Should Be Complusory");
return false;
}
var atposition = email.indexOf("#");
var dotposition = email.lastIndexOf(".");
if (atposition < 1 || dotposition < atposition + 2 || dotposition + 2 >= email.length) {
alert("Please enter a valid e-mail address...!!!");
return false;
}
}
$(function() {
$(document).on("click", "#submit_mail", function(e) {
if (validateform() == false) {
e.preventDefault();
document.getElementById("txt_name").value = $('#txt_name').val();
document.getElementById("txt_subject").value = $('#txt_subject').val();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="fname">Name</label>
<input type="text" id="txt_name" name="txt_name" placeholder="Your Name.." />
<label for="lname">EmailID</label>
<input type="text" id="txt_emailID" name="email" placeholder="Your EmailID.." />
<label for="lname">Subject</label>
<input type="text" id="txt_subject" name="txt_subject" placeholder="Your Subject.." />
<input type="submit" id="submit_mail" value="Send" />
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
How to print error message under respective input field if left empty and error message must be removed when filled, how to proceed further i have not used javascript for validation earlier.
script code
function validateForm() {
var a = document.forms["student_reg"]["name"].value;
if (a == null || a == "") {
alert("Name must be filled out");
return false;
}
var b = document.forms["student_reg"]["email"].value;
if (b == null || b == "") {
alert("Email must be filled out");
return false;
}
var c = document.forms["student_reg"]["username"].value;
if (c == null || c == "") {
alert("Username must be filled out");
return false;
}
var d = document.forms["student_reg"]["password"].value;
if (d == null || d == "") {
alert("Password must be filled out");
return false;
}
var e = document.forms["student_reg"]["roll_no"].value;
if (e == null || e == "") {
alert("Roll no must be filled out");
return false;
}
}
html code is here
<body>
Login
<form name="student_reg" method="POST" action="" onsubmit="return validateForm()">
<p>NAME:</p>
<input type="text" name="name" value="" >
<span class="error"><p id="name_error"></p></span>
<p>EMAIL:</p>
<input type="text" name="email" value="" >
<span class="error"><p id="email_error"></p></span>
<p>USERNAME:</p>
<input type="text" name="username" value="" >
<span class="error"><p id="username_error"></p></span>
<p>PASSWORD:</p>
<input type="password" name="password" value="" >
<span class="error"><p id="password_error"></p></span>
<p>ROLL NO:</p>
<input type="number" name="roll_no" value="" >
<span class="error"><p id="roll_no_error"></p></span>
<br/>
<br/>
<br/>
<input type="submit" name="submit" value="submit">
</form>
</body>
You can try this code:
It will check errors and returns at last after displaying all error messages if any.
function validateForm() {
var error = 0;
var a = document.forms["student_reg"]["name"].value;
document.getElementById('name_error').innerHTML = '';
if (a == null || a == "") {
// alert("Name must be filled out");
error++;
document.getElementById('name_error').innerHTML = 'Name must be filled out';
}
var b = document.forms["student_reg"]["email"].value;
document.getElementById('email_error').innerHTML = '';
if (b == null || b == "") {
// alert("Email must be filled out");
error++;
document.getElementById('email_error').innerHTML = 'Email must be filled out';
}
var c = document.forms["student_reg"]["username"].value;
document.getElementById('username_error').innerHTML = '';
if (c == null || c == "") {
// alert("Username must be filled out");
error++;
document.getElementById('username_error').innerHTML = 'Username must be filled out';
}
var d = document.forms["student_reg"]["password"].value;
document.getElementById('password_error').innerHTML = '';
if (d == null || d == "") {
// alert("Password must be filled out");
error++;
document.getElementById('password_error').innerHTML = 'Password must be filled out';
}
var e = document.forms["student_reg"]["roll_no"].value;
document.getElementById('roll_no_error').innerHTML = '';
if (e == null || e == "") {
// alert("Roll no must be filled out");
error++;
document.getElementById('roll_no_error').innerHTML = 'Roll no must be filled out';
}
if(error>0) {
return false;
}
return true;
}
Keep all the name attributes in array and validate in loop. As your ID is related to name attribute, concatenate the name with _error to get the ID of the error placeholder.
function validateForm() {
var names = ['name', 'email', 'username', 'password', 'roll_no'];
var errorCount = 0;
names.forEach(function(el) {
var val = document.forms["student_reg"][el].value;
if (val == null || val == "") {
document.getElementById(el + '_error').textContent = el.toUpperCase().replace('_', ' ') + " must be filled out";
++errorCount;
}
});
if (errorCount) return false;
}
<form name="student_reg" method="POST" action="" onsubmit="return validateForm()">
<p>NAME:</p>
<input type="text" name="name" value="">
<span class="error"><p id="name_error"></p></span>
<p>EMAIL:</p>
<input type="text" name="email" value="">
<span class="error"><p id="email_error"></p></span>
<p>USERNAME:</p>
<input type="text" name="username" value="">
<span class="error"><p id="username_error"></p></span>
<p>PASSWORD:</p>
<input type="password" name="password" value="">
<span class="error"><p id="password_error"></p></span>
<p>ROLL NO:</p>
<input type="number" name="roll_no" value="">
<span class="error"><p id="roll_no_error"></p></span>
<br/>
<br/>
<br/>
<input type="submit" name="submit" value="submit">
</form>
You can iterate through all elements of the form student_reg to validate email and required and print error message under respective input field if no value was set:
const validateForm = () => {
const form = document.forms['student_reg'],
inputs = [...form.getElementsByTagName('input')],
errors = [...form.getElementsByClassName('error')],
regex = /\S+#\S+\.\S+/,
setErrorMsg = (str, msg) => `${str.replace('_', ' ')} ${msg}`
let countErrors = 0
inputs.forEach((input, index) => {
// clear all errors
(errors[index] || '').innerHTML = ''
// validate email
if (input.name === 'email' && !regex.test(input.value)) {
errors[index].innerText = setErrorMsg(input.name, 'should be valid')
countErrors++
}
// validate required
if (!input.value) {
errors[index].innerText = setErrorMsg(input.name, 'field is required')
countErrors++
}
})
return countErrors === 0
}
p {
font-size: 13px;
margin: 4px 0 0;
}
.error {
font-size: 12px;
padding: 6px 0 4px;
color: red;
display: block
}
.error:first-letter {
text-transform: uppercase
}
button {
margin-top: 8px;
font-size: 16px;
}
<form name="student_reg" method="POST" action="" onsubmit="return validateForm()">
<p>NAME:</p>
<input type="text" name="name" value="">
<span class="error"></span>
<p>EMAIL:</p>
<input type="text" name="email" value="">
<span class="error"></span>
<p>USERNAME:</p>
<input type="text" name="username" value="">
<span class="error"></span>
<p>PASSWORD:</p>
<input type="password" name="password" value="">
<span class="error"></span>
<p>ROLL NO:</p>
<input type="number" name="roll_no" value="">
<span class="error"></span>
<button>Submit</button>
</form>
simple form It hold the Span for the Error msg.The span Id is very important here.you need to make color for errors using css
<form id="loginform" name="loginform" action="" method="post">
<label>Name</label>
<input type="text" name="username" />
<p></p>
<span id="usernameError"></span>
<p></p>
<label>Pwd</label>
<input type="password" name="password" />
<p></p>
<span id="passwordError"></span>
<p></p>
<input type="submit" value="Submit" />
</form>
script
<script type="application/javascript">
window.onload = function(){
function handleinput(){
if(document.loginform.username.value == ""){
document.getElementById("usernameError").innerHTML = "You must enter a username";
return false;
}
if(document.loginform.password.value == ""){
document.getElementById("passwordError").innerHTML = "You must enter a password";
return false;
}
}
document.getElementById("loginform").onsubmit = handleinput;
}
</script>
I'm not a pro in js so, my code is a mess (but it's working!). I would like to ask your help to reduce some redundancies in two cases. Those two are codes are affecting these two forms:
<form action="contact.php" method="post" name="form1" onsubmit="return validateForm1()">
<input type="text" name="name" id="inputName1" placeholder="Name">
<input type="text" name="tel" id="inputTel1" placeholder="Telephone Number">
<input type="text" name="address" id="inputAdr1" placeholder="Address">
<input type="text" name="topic" id="inputTop1" placeholder="Topic">
<input type="email" name="email" id="inputMail1" placeholder="E-mail">
<input type="email" id="inputConfirmMail1" onblur="mailConfirm1()" placeholder="Confirm E-mail">
<input type="submit" value="Send">
</form>
<form action="contact.php" method="post" name="form2" onsubmit="return validateForm2()">
<input type="text" name="name" id="inputName2" placeholder="Name">
<input type="text" name="tel" id="inputTel2" placeholder="Telephone Number">
<input type="text" name="address" id="inputAdr2" placeholder="Address">
<input type="text" name="topic" id="inputTop2" placeholder="Topic">
<input type="email" name="email" id="inputMail2" placeholder="E-mail">
<input type="email" id="inputConfirmMail2" onblur="mailConfirm2()" placeholder="Confirm E-mail">
<input type="submit" value="Send">
</form>
FIRST (a function to prevent my two forms to have empty inputs before submission)
function validateForm1() {
var c = document.forms["form1"]["name"].value;
var d = document.forms["form1"]["tel"].value;
var e = document.forms["form1"]["address"].value;
var f = document.forms["form1"]["topic"].value;
var g = document.forms["form1"]["email"].value;
if (c == null || c == "") {
alert("insert your name");
return false;
}
else if (d == null || d == "") {
alert("insert your telephone");
return false;
}
else if (e == null || e == "") {
alert("insert your address");
return false;
}
else if (f == null || f == "") {
alert("insert a topic");
return false;
}
else if (g == null || g == "") {
alert("insert your email");
return false;
}
}
function validateForm2() {
var c = document.forms["form2"]["name"].value;
var d = document.forms["form2"]["tel"].value;
var e = document.forms["form2"]["address"].value;
var f = document.forms["form2"]["topic"].value;
var g = document.forms["form2"]["email"].value;
if (c == null || c == "") {
alert("insert your name");
return false;
}
else if (d == null || d == "") {
alert("insert your telephone");
return false;
}
else if (e == null || e == "") {
alert("insert your address");
return false;
}
else if (f == null || f == "") {
alert("insert a topic");
return false;
}
else if (g == null || g == "") {
alert("insert your email");
return false;
}
}
SECOND (I have a "confirm your email" area in my form so I did this function to make sure the user inputs the same value in both areas)
function mailConfirm1() {
var mail1 = document.getElementById("inputMail1").value;
var conMail1 = document.getElementById("inputConfirmMail1").value;
if(mail1 != conMail1) {
alert('both emails are not the same');
}
}
function mailConfirm2() {
var mail2 = document.getElementById("inputMail2").value;
var conMail2 = document.getElementById("inputConfirmMail2").value;
if(mail2 != conMail2) {
alert('both emails are not the same');
}
}
Anyway, here you have some optimization:
function validateForm(form){
var c = document.forms[form]["name"].value;
var d = document.forms[form]["tel"].value;
var e = document.forms[form]["address"].value;
var f = document.forms[form]["topic"].value;
var g = document.forms[form]["email"].value;
if (c == null || c == "") {
alert("insert your name");
return false;
}
else if (d == null || d == "") {
alert("insert your telephone");
return false;
}
else if (e == null || e == "") {
alert("insert your address");
return false;
}
else if (f == null || f == "") {
alert("insert a topic");
return false;
}
else if (g == null || g == "") {
alert("insert your email");
return false;
}
}
function mailConfirm(formNum){
var mail = document.getElementById("inputMail"+formNum).value;
var conMail = document.getElementById("inputConfirmMail"+formNum).value;
if(mail != conMail) {
alert('both emails are not the same');
}
}
form{
padding: 1.2rem;
}
<form action="contact.php" method="post" name="form1" onsubmit="return validateForm('form1')">
<input type="text" name="name" id="inputName1" placeholder="Name">
<input type="text" name="tel" id="inputTel1" placeholder="Telephone Number">
<input type="text" name="address" id="inputAdr1" placeholder="Address">
<input type="text" name="topic" id="inputTop1" placeholder="Topic">
<input type="email" name="email" id="inputMail1" placeholder="E-mail">
<input type="email" id="inputConfirmMail1" onblur="mailConfirm(1)" placeholder="Confirm E-mail">
<input type="submit" value="Send">
</form>
<form action="contact.php" method="post" name="form2" onsubmit="return validateForm('form2')">
<input type="text" name="name" id="inputName2" placeholder="Name">
<input type="text" name="tel" id="inputTel2" placeholder="Telephone Number">
<input type="text" name="address" id="inputAdr2" placeholder="Address">
<input type="text" name="topic" id="inputTop2" placeholder="Topic">
<input type="email" name="email" id="inputMail2" placeholder="E-mail">
<input type="email" id="inputConfirmMail2" onblur="mailConfirm(2)" placeholder="Confirm E-mail">
<input type="submit" value="Send">
</form>
I have a form which has four fields, when the all the fields are empty and submit button is clicked- it should alert "Please select at least one value".
When I enter the value in any of the fields the form should get submitted. I tried the following code but it's not working
function validatefleid() {
var computername = document.myform.computername.value;
var monitorname = document.myform.monitorname.value;
var tvname = document.myform.tvname.value;
var laptopname = document.myform.laptopname.value;
var cellphonename = document.myform.cellphonename.value;
if ((computername == null || computername == "") || (monitorname == null || monitorname == "") || (tvname == null || tvname == "") || (laptopname == null || laptopname == "") || (cellphonename == null || cellphonename == "")) {
alert("Please atleast one value");
return false;
}
}
<form name="myform" onsubmit="return validatefleid()">
computer
<input type="text" class="form-control inpt-bx-txtclr-home" name="computername" id="computerid" placeholder="000">monitor
<input type="text" class="form-control inpt-bx-txtclr-home" name="monitorname" id="monitorid" placeholder="000">tv
<input type="text" class="form-control inpt-bx-txtclr-home" name="tvname" id="tvid" placeholder="000">laptop
<input type="text" class="form-control inpt-bx-txtclr-home" name="laptopname" id="laptopid" placeholder="000">cellphone
<input type="text" class="form-control inpt-bx-txtclr-home" name="cellphonename" id="cellphoneid" placeholder="000">
<button type="submit">Calculate</button>
</form>
It is possible by iterating through all of the inputs within the form, and look for at least one input with value that's different than ''. Check the demo:
$(function(){
var $form = $('#myform');
$form.submit(function(){
var valid = false;
$('input', $form).each(function(){
if($(this).val() != ''){
valid = true;
}
});
if (!valid) {
alert("Please atleast one value");
}
return valid;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform" name="myform">
computer<input type="text" class="form-control inpt-bx-txtclr-home" name="computername" id="computerid" placeholder="000">
monitor<input type="text" class="form-control inpt-bx-txtclr-home" name="monitorname" id="monitorid" placeholder="000">
tv<input type="text" class="form-control inpt-bx-txtclr-home" name="tvname" id="tvid" placeholder="000">
laptop<input type="text" class="form-control inpt-bx-txtclr-home" name="laptopname" id="laptopid" placeholder="000">
cellphone<input type="text" class="form-control inpt-bx-txtclr-home" name="cellphonename" id="cellphoneid" placeholder="000">
<button type="submit" >Calculate</button>
</form>
Without jQuery :
https://jsfiddle.net/uL28jsf9/
<script type="text/javascript">
function validatefleid()
{
var allFieldsNames = ['computername', 'monitorname', 'tvname', 'laptopname', 'cellphonename'];
var checkIfFieldEmpty function(fieldName) {
var fieldValue = document.myform[fieldName].value;
return fieldValue === "" || fieldValue === null
}
var allFieldsEmpty = allFieldsNames.every(checkIfFieldEmpty);
if (allFieldsEmpty) {
alert("Please atleast one value");
return false;
}
else {
alert("I'm ok with that !")
}
}
</script>
oops i have got the answer
I have a form which as four fields when the all the fields are empty and submit button is clicked it should alert as "please select atleast one value" when i entry the value in any of the one fields the form should get submitted i have tries the following code but its not working
<script type="text/javascript">
function validatefleid()
{
var computername=document.myform.computername.value;
var monitorname=document.myform.monitorname.value;
var tvname=document.myform.tvname.value;
var laptopname=document.myform.laptopname.value;
var cellphonename=document.myform.cellphonename.value;
if((computername==null || computername=="") && (monitorname==null || monitorname=="") && (tvname==null || tvname=="") && (laptopname==null || laptopname=="") && (cellphonename==null || cellphonename==""))
{
alert("Please atleast one value");
return false;
}
}
</script>
<form name="myform" onsubmit="return validatefleid()">
computer<input type="text" class="form-control inpt-bx-txtclr-home" name="computername" id="computerid" placeholder="000">
monitor<input type="text" class="form-control inpt-bx-txtclr-home" name="monitorname" id="monitorid" placeholder="000">
tv<input type="text" class="form-control inpt-bx-txtclr-home" name="tvname" id="tvid" placeholder="000">
laptop<input type="text" class="form-control inpt-bx-txtclr-home" name="laptopname" id="laptopid" placeholder="000">
cellphone<input type="text" class="form-control inpt-bx-txtclr-home" name="cellphonename" id="cellphoneid" placeholder="000">
<button type="submit" >Calculate</button>
</form>
here is a complete cross-browser working version of validatefleid function.
function validatefleid(){
var inputIds = ['computerid','monitorid','tvid','laptopid','cellphoneid'];
var hasEnteredAnyValue = false;
for(var i=0;i<inputIds.length;i++){
hasEnteredAnyValue = document.getElementById(inputIds[i]).value;
if(hasEnteredAnyValue)break;
}
if(!hasEnteredAnyValue)
{
alert("Please atleast one value");
return false;
}
}
<script>
function validateForm() {
var x = document.forms["Email"].value;
var atpos = x.indexOf("#");
var dotpos = x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>x.length || x="" || x=str.search(" ");)
{
alert("Not a valid e-mail address!!");
return false;
}
var y = document.forms["Password"].value;
if(y.length>6)
else
{
alert("Minimum 6 Characters Required!!");
return false;
}
var vl = document.forms["Phno"].value;
for (var i = 0; i<vl.length; i++)
{
if((vl[i]!="a" && vl[i]!="b" && vl[i]!="c" && vl[i]!="d" && vl[i]!="e" && vl[i]!="f" && vl[i]!="g" && vl[i]!="h"
&& vl[i]!="i" && vl[i]!="j" && vl[i]!="k" && vl[i]!="l" && vl[i]!="m" && vl[i]!="n" && vl[i]!="o" && vl[i]!="p" && vl[i]!="q" &&
vl[i]!="r" && vl[i]!="s" && vl[i]!="t" && vl[i]!="u" && vl[i]!="v" && vl[i]!="w" && vl[i]!="x" && vl[i]!="y" && vl[i]!="z" && vl
[i]!="#" && vl[i]!="_" && vl[i]!="." && vl[i]!="-"))
{
alert("Enter a valid Phone Number!!");
return false;
}
}
if(vl.lenght>10 || vl.lenght<10)
{
alert("Enter a valid Phone Number!! ");
return false;
}
var d = document.forms["date"].value;
if(d="")
return false;
else
return true;
}
<form method="post" onsubmit="validateForm()">
<center> <input style="padding: 5 10px;width:274px;height:44px;margin-bottom: 10px;" id="Email" name="Email"
type="email" placeholder="Email">
<input style="padding: 5 10px;width:274px;height:44px;margin-bottom: 10px;" id="Password" name="Password"
type="Password" placeholder="Password">
<input style="padding: 5 10px;width:274px;height:44px;margin-bottom: 10px;" id="Phno" name="Phno"
type="phonenumber" placeholder="Phone No">
<input style="padding: 5 10px;width:274px;height:44px;margin-bottom: 10px;" id="date" name="date" type="date"
placeholder="DOB">
<button type="submit" style="border: 1px solid; background-color:#3079ed; width:274px;height:44px;"
class="button"><b>Sign Up</b></button>
</center>
</form>
I am new to java script and currently learning it.
My browser is only validating the Email field and skipping the rest of the field
why is this as my brackets are proper. And i have mentioned return true only after the last field.
(UPDATE)
The Form (notice the "return validateForm();" instead of "validateForm()":
<form method="post" onsubmit="return validateForm();">
<center> <input style="padding: 5 10px;width:274px;height:44px;margin-bottom: 10px;" id="Email" name="Email"
type="email" placeholder="Email">
<input style="padding: 5 10px;width:274px;height:44px;margin-bottom: 10px;" id="Password" name="Password"
type="Password" placeholder="Password">
<input style="padding: 5 10px;width:274px;height:44px;margin-bottom: 10px;" id="Phno" name="Phno"
type="phonenumber" placeholder="Phone No">
<input style="padding: 5 10px;width:274px;height:44px;margin-bottom: 10px;" id="date" name="date" type="date"
placeholder="DOB">
<button type="submit" style="border: 1px solid; background-color:#3079ed; width:274px;height:44px;"
class="button"><b>Sign Up</b></button>
</center>
</form>
*The Function note the GetElementById() instead of forms[] : *
function validateForm() {
var x = document.getElementById("Email").value;
var atpos = x.indexOf("#");
var dotpos = x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>x.length || x==="" ||x.indexOf(" ")>=0)
{
alert("Not a valid e-mail address!!");
return false;
}
var y = document.getElementById("Password").value;
if(y.length<6)
{
alert("Minimum 6 Characters Required!!");
return false;
}
var vl = document.getElementById("Phno").value;
for (var i = 0; i<vl.length; i++)
{
if(isNaN(vl[i]))
{
alert("Enter a valid Phone Number!!");
return false;
}
}
if(vl.lenght!=10)
{
alert("Enter a valid Phone Number!! ");
return false;
}
var d = document.getElementById("date").value;
if(d==="")
return false;
return true;
}
I am building a web form with validation and when the form is submitted with none of the fields filled in It pops up with the error message but then still goes through. Maybe someone else can see my mistake. Below I added the scripts for both the form and validators.
Thank you in advance!
function validateForm()
{
var x=document.forms["contactform"]["fname"].value;
if (x==null || x=="" || x=="First Name*" )
{
alert("Please Provide your First Name");
return false;
}
var y=document.forms["contactform"]["lname"].value;
if (y==null || y=="" || y=="Last Name*" )
{
alert("Please Provide your Last Name");
return false;
}
var em = document.forms["contactform"]["email"].value;
if (em == null || em == "" || em == "Email*")
{
alert("Please Provide your Email");
return;
}
var atpos=em.indexOf("#");
var dotpos=em.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=em.length)
{
alert("E-mail address is not valid");
return false;
}
var ph = document.forms["contactform"]["phone"].value;
if (ph ==null || ph=="" || ph=="Phone*" )
{
alert("Please Provide your Phone Number");
return;
}
document.contactform.submit();
}
<form class="cmxform" id="contactform" method="post" action="contact-life-factor2.asp" >
<input name="fname" type="text"class="required" onBlur="if(this.value=='')this.value=this.defaultValue;" onFocus="if(this.value===this.defaultValue)this.value='';" value="First Name*" />
<input name="lname" type="text"class="required" onBlur="if(this.value=='')this.value=this.defaultValue;" onFocus="if(this.value===this.defaultValue)this.value='';" value="Last Name*" />
<input name="company" type="text"class="" onBlur="if(this.value=='')this.value=this.defaultValue;" onFocus="if(this.value===this.defaultValue)this.value='';" value="Company" />
<input name="email" type="text" class="required" onBlur="if(this.value=='')this.value=this.defaultValue;" onFocus="if(this.value===this.defaultValue)this.value='';" value="Email*"/>
<input name="phone" type="text" class="" onBlur="if(this.value=='')this.value=this.defaultValue;" onFocus="if(this.value===this.defaultValue)this.value='';" value="Phone*"/><br>
<div class="clearfix"></div>
<div style="padding-left:6px; padding-top:5px; font-weight:bold; color:#686868;">Comments:</div>
<textarea name="comments" cols="" rows="" onBlur="if(this.value=='')this.value=this.defaultValue;" onFocus="if(this.value===this.defaultValue)this.value='';" value="comments" ></textarea>
<input type="submit" value="Submit" name="submit" class="submit" onClick="javascript:validateForm();" style="margin-right:44px;"/>
</form>
So there are a couple of issues:
return; is not equivalent to return false; or return true;, you need to be explicit with your return value as this will dictate whether or not your form submits (true) or not (false).
Remove the onclick from your submit button and move it to your form tag as an onsubmit event
onsubmit="return validateForm()"
onclick of submit validation doesnt stop.use onsubmit in form
<form class="cmxform" id="contactform" method="post" onsubmit="return validateForm();" action="contact-life-factor2.asp" >
function validateForm()
{
var x=document.forms["contactform"]["fname"].value;
if (x==null || x=="" || x=="First Name*" )
{
alert("Please Provide your First Name");
return false;
}
var y=document.forms["contactform"]["lname"].value;
if (y==null || y=="" || y=="Last Name*" )
{
alert("Please Provide your Last Name");
return false;
}
var em = document.forms["contactform"]["email"].value;
if (em == null || em == "" || em == "Email*")
{
alert("Please Provide your Email");
return false;
}
var atpos=em.indexOf("#");
var dotpos=em.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=em.length)
{
alert("E-mail address is not valid");
return false;
}
var ph = document.forms["contactform"]["phone"].value;
if (ph ==null || ph=="" || ph=="Phone*" )
{
alert("Please Provide your Phone Number");
return;
}
}