NOTHING IS WORKING! I added onSubmit = "validate()" to my register button in the form, and I made the function and the alert if the fields are left empty. But NOTHING IS WORKING!
No alerts no errors in console. No hope!
<head>
<title>WHAT THE TECH!</title>
<script type="text/javascript">
function validate() {
let fullname = document.getElemenyByname("full_name").value;
let email = document.getElemenyById("email").value;
let pass = document.getElemenyById("password").value;
let add = document.getElemenyById("address").value;
if (fullname == "" || fullname.length == 0) {
alert("Enter Full Name");
document.getElemenyById("full_name").focus;
return false;
} else if (email == "" || email.length == 0) {
alert("Enter Email Address!");
document.getElemenyById("email").focus;
return false;
}
}
</script>
</head>
<body>
<div class="mainwrap">
<div class="content">
<div class="SignUp">
<div class="Formup">
<div class="title">New here? Register!</div>
<form name="register">
<table>
<tr>
<td>Full Name: </td>
<td><input type="text" id="full_name">
</td>
</tr>
<tr>
<td>Email: </td>
<td><input type="text" id="email">
</td>
</tr>
<tr>
<td>Password: </td>
<td><input type="password" id="password">
</td>
</tr>
<tr>
<td>Country: </td>
<td>
<select>
<option value="U.A.E">U.A.E</option>
<option value="K.S.A">K.S.A</option>
<option value="Qatar">Qatar</option>
</select>
</td>
</tr>
<tr>
<td>Gender: </td>
<td>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</td>
</tr>
<tr>
<td>Address: </td>
<td><input type="text" id="address">
</td>
</tr>
<tr>
<td>
<input type="submit" value="Register" class="registerbutton" name="register" onSubmit="validate()">
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
</div>
</body>
You should use document.getElementsByName if you want to fetch the value using name attribute. I would recommend to do it by "id" attribute.
function submitFunction() {
var firstName = document.getElementsByName("first_Name")[0].value;
if (firstName == "" || firstName == null || firstName.length == 0) {
alert("First Name is required");
return false;
}
}
Also add return to the onsubmit event to avoid page refresh.
<form name="Register" onsubmit="return submitFunction() " method="post">
Option 2 : Using HTML5
The required attribute will do the validation check and you can skip javascript.
<input type="text" name="first_Name" required>
Related
I am new bee to JavaScript. I have a form which is not validated with alert button. I am having a form which is to be submitted without errors. If I submit the forms with the empty fields, an alert message should be popped up.
The following is my code:
function validate_Form() {
alert('hi how');
exit;
var tokenNo = document.forms["myForm"]["txt1"].tokenNo;
if (tokenNo == null || tokenNo == "") {
alert("Enter The Token No");
return false;
} else {
document.write("pola");
}
}
<table>
<form name="Sec_guard_form" onsubmit="validate_Form()">
<tr>
<td>Token No</td>
<td>
<input type="text" value="" name="token_no" />
</td>
</tr>
<tr>
<td>Other Property</td>
<td>
<input type="text" value="" name="other_prop" />
</td>
</tr>
<tr>
<td>Bike Number</td>
<td>
<input type="text" value="" name="bike_no" />
</td>
</tr>
<tr>
<td>bike name</td>
<td>
<input type="text" value="" name="bike_nm" />
</td>
</tr>
<tr>
<td>bike model</td>
<td>
<select option="bike model">
<option value="Activa 3G">Activa 3G</option>
<option value="shine">shine</option>
<option value="unicon">unicon</option>
<option value="yuga">yuga</option>
<option value="neo">neo</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" value="submit" />
</td>
<td>
<input type="submit" value="cancel" />
</td>
</tr>
</form>
</table>
The above is my code, for i am using the mozilla firefox as my browser. Is that an issue. My function inside the script is not even called. what am i wrong here...
You can change your javascript like this :
function validate_Form() {
var form = document.querySelector("form");
var tokenNo = form.elements.token_no.value;
if (tokenNo == null || tokenNo == "") {
alert("Enter The Token No");
return false;
} else {
document.write("pola");
}
return false;
}
and your html like this:
<form name="Sec_guard_form" onsubmit="return validate_Form()">
exit; doesn't mean anything in javascript. You have to use return. So if you return before the function does anything then it is not useful at all!
The syntax you used for selecting form element and getting its value was wrong according to me so I corrected the syntax...
Also, you might be wondering why to use return validate_form() in HTML and return false in the function. It is used just for stopping the page to refresh/redirect before the entire function gets executed!
Try this code, it worked for me... I don't know what hi how was for so I eliminated it.
You are not calling function on your submit button Please use this to call function first.
<input type="submit" value="submit" onclick="validate_Form()" />
change
<form name="Sec_guard_form" onsubmit="validate_Form()">
to
<form name="Sec_guard_form" onsubmit="return validate_Form()">
Complete html code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<table>
<form id="Sec_guard_form" onsubmit="return validate_Form();" method="post">
<tr>
<td>Token No</td>
<td>
<input type="text" value="" name="token_no" />
</td>
</tr>
<tr>
<td>Other Property</td>
<td>
<input type="text" value="" name="other_prop" />
</td>
</tr>
<tr>
<td>Bike Number</td>
<td>
<input type="text" value="" name="bike_no" />
</td>
</tr>
<tr>
<td>bike name</td>
<td>
<input type="text" value="" name="bike_nm" />
</td>
</tr>
<tr>
<td>bike model</td>
<td>
<select option="bike model">
<option value="Activa 3G">Activa 3G</option>
<option value="shine">shine</option>
<option value="unicon">unicon</option>
<option value="yuga">yuga</option>
<option value="neo">neo</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" value="submit" />
</td>
<td>
<input type="submit" value="cancel" />
</td>
</tr>
</form>
</table>
<script>
function validate_Form()
{ alert('hi how');
var tokenNo = document.getElementById("Sec_guard_form")["token_no"].value;
if (tokenNo == null || tokenNo == "")
{
alert("Enter The Token No");
return false;
}
else
{
document.write("pola");
}
}
</script>
</body>
</html>
This is working fine
I am working on sign up form using html form , but i am facing problem my password cannot validate when I enter wrong password and enter write past does not show anything so what should i do any help.
function validate(){
var = pass(document.getElementById("pwd").value;
var = pas1(document.getElementById("cpwd").value;
if (pass==pas1)
{
}
else
{
alert("Try again");
}
}
</script>
</head>
<body>
<p class="style2 style8">SIGN UP FORM!!!!</p>
<form onclick="validate()" action="insert.php" method="post">
<table width="270" height="386" border="1" align="right" bordercolor="#993366" bgcolor="#CCCCCC"><td width="260"><table width="232" border="1">
<tr>
<td colspan="2"><span class="style2">loginform</span></td>
</tr>
<tr>
<td width="72"><span class="style5">Name</span></td>
<td width="144"><label>
<input name="name" type="text" id="name" onblur="MM_validateForm('name','','R');return document.MM_returnValue" placeholder="Name" />
</label></td>
</tr>
<tr>
<td width="72"><span class="style5">Gender</span></td>
<td><p>
<label>
<input type="radio" name="gender" value="Male" id="gender"/>
<span class="style5">Male</span></label>
<span class="style5" onfocus="MM_validateForm('fname','','R');return document.MM_returnValue"><br />
<label>
<input type="radio" name="gender" value="female" id="gender" />
female</label>
</span><br />
</p></td>
</tr>
<td width="72"><span class="style5">DOB</span></td>
<td width="144"><span id="sprytextfield1">
<label>
<input name="dob" type="text" id="dob" onblur="MM_validateForm('dob','','R');MM_validateForm('dob','','R');return document.MM_returnValue" placeholder="yyyy/mm/dd"/>
</label>
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span></td>
</tr>
<tr>
<td><span class="style5">Password</span></td>
<td><label>
<input name="pwd" type="password" id="pwd" onchange="MM_validateForm('pwd','','R');return document.MM_returnValue" placeholder="password"/>
</label></td>
</tr>
<tr>
<td width="72"><span class="style5">Confirm Password</span></td>
<td width="144"><label>
<input name="cpwd" type="password" id="cpwd" onchange="MM_validateForm('cpwd','','R');return document.MM_returnValue" placeholder="Confirm Password"/>
</label> </td>
</tr>
<tr>
<td colspan="2"><label>
<div align="center">
<input type="submit" name="submit" id="submit" value="Signup" />
</div>
</label></td>
</tr>
</table>
<label></label></td>
</tr>
</table>
</form>
<h1> </h1>
<script type="text/javascript">
<!--
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "date", {format:"yyyy/mm/dd"});
//-->
</script>
</body>
</html>
there is no pass in your content. You are writing it as:
var = pass(document.getElementById("pwd").value;
var = pas1(document.getElementById("cpwd").value;
Which should be this:
var pass = (document.getElementById("pwd").value;
var pas1 = (document.getElementById("cpwd").value;
Because the variable's name comes before the = sign. To show that this variable is having this value!
So, now lets use this one and try it like this:
if(pass==pas1) {
// save the password or whatever
} else {
// please try again..
}
This way, the user will check the inputs again. And it they are not working. Then you must first check that whether you are using correct ID of the element, or you are using ClassName as ID!
That's what the issue might be.
Well, for starters,
var = pass(document.getElementById("pwd").value;
var = pas1(document.getElementById("cpwd").value;
should be
var pass = document.getElementById("pwd").value;
var pas1 = document.getElementById("cpwd").value;
Edit:
Also, change onclick="validate()" to onclick="return validate();" and add return false; after the alert("Try again");.
Just small change in your code
function validate(){
var pass = document.getElementById("pwd").value;
var pas1 = document.getElementById("cpwd").value;
if (pass==pas1){
}
else{
alert("Try again");
return false;
}
}
I have an HTML file, JavaScript file and a PHP file. The JavaScript is used to validate the user input and then to pass the form into the PHP page.
The validation function is working great, but the form will not submit from the JavaScript to the PHP file.
After spending two days on this, I still can not figure out what I have wrong and why the JavaScript will not submit the form data into the PHP file and how to get the PHP page to appear after submitting
HTML:
<div class = "formtext">
<p>
<form id = "formtext" name="survey" method="post" action="formtext.php">
<table id="surveytable" width="300" border="1">
<tr>
<td>
Name:
<input type = "text" id="userName"
name="name" onkeyup="document.getElementById('mirror').innerHTML=this.value" />
<br/ >
Your name: <span id="mirror"></span>
</td>
</tr>
<tr>
<td>
Number:
<input type = "text" id="userNumber"
name="number" onkeyup="document.getElementById('mirror1').innerHTML=this.value" />
<br />
Your number: <span id="mirror1"></span>
</td>
</tr>
<tr>
<td>
Email:
<input type = "text" id="userEmail"
name="email" onkeyup="document.getElementById('mirror2').innerHTML=this.value" />
<br />
Your email: <span id="mirror2"></span>
</td>
</tr>
<tr>
<td>
Gender:<br />
<input type="radio" name="gen" id="userGender" value="Decline"
checked/> Decline<br />
<input type="radio" name="gen" id="userGender" value="Male" />Male<br />
<input type="radio" name="gen" id="userGender" value="Female" /> Female
<tr>
<td>
Major:
<select name="major" id="userMajor">
<option value="" selected="selected">Select Major</option>
<option value="Computer Science">Computer Science</option>
<option value="Information Technology">Information Technology</option>
<option value="Engineering">Engineering</option>
<option value="Biology">Biology</option>
<option value="Other">Other</option>
</select>
</td>
</tr>
<tr>
<td>
Hobbies:<br />
<input name="hob" id="userHobby" type="checkbox" value="Running,
" + " " />Running<br />
<input name="hob" id="userHobby" type="checkbox" value="Sleeping,
" + " "/>Sleeping<br />
<input name="hob" id="userHobby" type="checkbox" value="Fishing,
" + " "/>Fishing<br />
<input name="hob" id="userHobby" type="checkbox" value="Other" />Other
</td>
</tr>
</table>
<p>
<input type="button" value="Enter" onclick="Survey()"/>
</p>
</form>
</div>
</form>
JavaScript:
function Survey()
{
if (!ValidateForm())
{
return false;
}
else {
var userName = document.forms[0].name.value+"<br />";
var userNumber = document.forms[0].number.value+"<br />";
var userEmail= document.forms[0].email.value+"<br />";
var sex;
if (document.forms[0].gen[0].checked)
sex=document.forms[0].gen[0].value;
else if (document.forms[0].gen[1].checked)
sex=document.forms[0].gen[1].value;
else if (document.forms[0].gen[2].checked)
sex=document.forms[0].gen[2].value;
var userGender = sex+"<br />";
var userMajor = document.forms[0].major.value+"<br />";
var hobby=new Array()
var counter=0;
for (i=0;i<document.forms[0].hob.length;i++)
{
if (document.forms[0].hob[i].checked)
{
hobby[counter]=document.forms[0].hob[i].value;
counter++;
}
}
var hobPick="";
for (n=0;n<hobby.length;n++)
hobPick+=hobby[n];
var userHobby = hobPick;
document.getElementById("printName").innerHTML = userName
document.getElementById("printNumber").innerHTML = userNumber
document.getElementById("printEmail").innerHTML = userEmail
document.getElementById("printGender").innerHTML = userGender
document.getElementById("printMajor").innerHTML = userMajor
document.getElementById("printHobby").innerHTML = userHobby
document.getElementById('formtext').submit();
}
}
function ValidateForm()
{
if (document.forms[0].name.value.length === 0)
{
alert("Name is Required");
return false;
}
else if
(document.forms[0].number.value.length === 0)
{
alert("Number is Required");
return false;
}
else if
(document.forms[0].email.value.length === 0)
{
alert("Email is Required");
return false;
}
else if
(document.forms[0].userMajor.value === "")
{
alert("Major is Required");
return false;
}
else if
(document.forms[0].userHobby[0].checked === false &&
document.forms[0].userHobby[1].checked=== false &&
document.forms[0].userHobby[2].checked === false &&
document.forms[0].userHobby[3].checked === false)
{
alert("hobby is Required");
return false;
}
else
{
return true;
}
}
PHP:
<table id='userInputTbl' width='600' border='1'>
<tr>
<td id='tblName' colspan='6'>
<strong>You Submitted: </strong><br />
</td>
</tr>
<tr>
<td><strong>Name:</strong><br />
</td>
<td> <?echo $_POST["printName"]?></td>
</tr>
<tr>
<td><strong>Number:</strong><br /></td>
<td> <?echo $_POST['printNumber']?></td>
</tr>
<tr>
<td><strong>Email:</strong><br /></td>
<td> <?echo $_POST['printEmail']?></td>
</tr>
<tr>
<td><strong>Gender:</strong><br /></td>
<td> <? echo $_POST['printGender']?></td>
</tr>
<tr>
<td><strong>Major:</strong><br /></td>
<td> <? echo $_POST['printMajor']?></td>
</tr>
<tr>
<td><strong>Hobbies:</strong><br /></td>
<td> <? echo $_POST['printHobby']?></td>
</tr>
</table>
Your problem lies in this part:
document.getElementById("printName").innerHTML = userName
document.getElementById("printNumber").innerHTML = userNumber
document.getElementById("printEmail").innerHTML = userEmail
document.getElementById("printGender").innerHTML = userGender
document.getElementById("printMajor").innerHTML = userMajor
document.getElementById("printHobby").innerHTML = userHobby
No such IDs exist! by the way , ID should be unique which means only one element should have userHobby as ID.
<td>
Hobbies:<br />
<input name="hob" id="userHobby" type="checkbox" value="Running,
" + " " />Running<br />
<input name="hob" id="userHobby" type="checkbox" value="Sleeping,
" + " "/>Sleeping<br />
<input name="hob" id="userHobby" type="checkbox" value="Fishing,
" + " "/>Fishing<br />
<input name="hob" id="userHobby" type="checkbox" value="Other" />Other
</td>
You seem to have an extra { in your ValidateForm() function:
{
var userName = document.forms[0].name.value+"<br />";
Perhaps you want to change it to:
else {
var userName = document.forms[0].name.value+"<br />";
Your php file is broken.
<?php
echo <table id='userInputTbl' width='600' border='1'>
<tr>
<td id='tblName' colspan='6'>
<strong>You Submitted: </strong><br />
</td>
</tr>
<tr>
<td><strong>Name:</strong><br />
</td>
<td <?echo $_POST["userName"]?> ></td>
echo expects a string, but you don't need any of that anyway.
Get rid of the opening <?php and the echo. Go right into the html like this
<table id='userInputTbl' width='600' border='1'>
<tr>
<td id='tblName' colspan='6'>
<strong>You Submitted: </strong><br />
</td>
</tr>
<tr>
<td><strong>Name:</strong><br />
</td>
<td <?echo $_POST["userName"]?> ></td>
This part also looks wrong:
<td <?echo $_POST["userName"]?> ></td>
I think you meant
<td><?echo $_POST["userName"]?></td>
Also, in this section:
function Survey()
{
if (!ValidateForm())
{
return false;
}
{
var userName = document.forms[0].name.value+"<br />";
The { is out of place. Do you mean to have an else { there?
And another thing: What is the point of displaying the values to the id="print..." elements if you're just submitting the form anyway? The user won't see any of it, just for a split second before they're redirected anyway. Get rid of all of that.
I'm back again...
You're inconsistent here:
document.forms[0].hob[i]
vs this:
document.forms[0].userHobby[0]
You should be using the names, not the ids, here. Use hob.
You must do this validation in the OnSubmit event of the form, see this article in W3Schools
I am trying to do simple form validation by using jQuery. Actually I am try to validate the input boxes on blur and focus. I am just validating first input for now which validate user first name.It is not functioning properly.
Can any please help me?
HTML & JS CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
Test
</title>
<style type="text/css">
.showerror{
display:block;
}
.noshowerror{
display:none;
}
.remerr{
display:none;
}
.redborder{
border:#F00 solid 1px;
background-color:yellow;
}
.greenborder {
border:#0F3 solid 1px;
background-color:#6F6;
}
</style>
</head>
<body>
<div style="width:450px">
<div style="float:left">
<table>
<form id="eg">
<tr>
<td>
<label>
Name:
</label>
<td>
<input type="text" id="name" />
</tr>
<tr>
<td>
<label>
Surname:
</label>
<td>
<input type="text" id="surname" />
</tr>
<tr>
<td>
<label>
Email:
</label>
<td>
<input type="text" id="email" />
</tr>
<tr>
<td>
<label>
Number:
</label>
<td>
<input type="text" id="number" />
</tr>
<tr>
<td>
<label>
Age:
</label>
<td>
<input type="text" id="age" />
</tr>
<tr>
<td>
<label>
Comment:
</label>
<td>
<input type="text" id="comment" />
</tr>
<tr>
<td>
<label>
Password
</label>
<td>
<input type="password" id="pwd" />
</tr>
<tr>
<td>
<label>
Confirm Password
</label>
<td>
<input type="password" id="cnfmpwd" />
</tr>
<tr>
<td colspan="2">
<input type="submit" value="test" />
</td>
</tr>
</form>
</table>
</div>
<div style="float:right">
<p id="fail" class="noshowerror" >
Please enter name
</p>
<p id="nameerr2" class="remerr">
Name is correct
</p>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
if ($("#name").val('')) {
$("#name").val('Name Please');
}
$('#name').focus(function () {
if ($('#name').val() == 'Name Please') {
$('#name').val("");
}
});
$('#name').blur(function () {
var nameRegex = /^[A-Za-z]+$/;
var fname = document.getElementById("name").value;
if (!nameRegex.test(fname)) {
$("#name").addClass('redborder');
} else if (fname == " ") {
$("#name").addClass('redborder');
} else {
$("#name").addClass('greenborder');
return false;
}
});
});
</script>
</body>
</html>
Thanks in advance
I have refined our code and its working as you intended, there were several mistake in defining the elements within table,may be you can have a look at my code on how to define it .
LIVE DEMO
HTML CODE:
<body>
<div style="width:450px">
<div style="float:left">
<form id="eg" action="/">
<table>
<tr>
<td>
<label>Name:</label>
</td>
<td>
<input type="text" id="name" />
</td>
</tr>
<tr>
<td>
<label>Surname:</label>
</td>
<td>
<input type="text" id="surname" />
</td>
</tr>
<tr>
<td>
<label>Email:</label>
</td>
<td>
<input type="text" id="email" />
</td>
</tr>
<tr>
<td>
<label>Number:</label>
</td>
<td>
<input type="text" id="number" />
</td>
</tr>
<tr>
<td>
<label>Age:</label>
</td>
<td>
<input type="text" id="age" />
</td>
</tr>
<tr>
<td>
<label>Comment:</label>
</td>
<td>
<input type="text" id="comment" />
</td>
</tr>
<tr>
<td>
<label>Password</label>
</td>
<td>
<input type="password" id="pwd" />
</td>
</tr>
<tr>
<td>
<label>Confirm Password</label>
</td>
<td>
<input type="password" id="cnfmpwd" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="test" onclick="return false;" />
</td>
</tr>
</table>
</form>
</div>
</div>
<div style="float:right">
<p id="fail" class="noshowerror">Please enter name</p>
<p id="nameerr2" class="remerr">Name is correct</p>
</div>
</body>
JS CODE:
$(document).ready(function () {
if ($("#name").val('')) {
$("#name").val('Name Please');
}
$('#name').focus(function () {
if ($('#name').val() == 'Name Please') {
$('#name').val("");
}
});
$('#name').blur(function () {
var nameRegex = /^[A-Za-z]+$/;
// var fname = document.getElementById("name").value;
var fname = $("#name").val();
alert(nameRegex.test(fname));
if (!(nameRegex.test(fname))) {
$("#name").removeClass('greenborder').addClass('redborder');
} else if (fname == " ") {
$("#name").removeClass('greenborder').addClass('redborder');
} else {
$("#name").removeClass('redborder').addClass('greenborder');
return false;
}
});
});
When your using jQuery lib, make sure you make the most of it, i have seen that there was raw javascript syntax in your code. jQuery was designed make things easier by reducing the syntax.
Edited:
I have refined the code, so that the code work on any number of times.
Happy Coding :)
$('#name').blur(function(){
trigger the blur event.
To listen for the blur event, made by the user :
$('#name').on("blur", function(){
if ($("#name").val('')) {
$("#name").val('Name Please');
}
$('#name').focus(function () {
if ($('#name').val() == 'Name Please') {
$('#name').val("");
}
can be changed by :
<input type="text" name="name" id="name" placeholder="Name Please" />
http://www.w3schools.com/tags/att_input_placeholder.asp
For your issue :
var fname = $("#name").val(); //jQuery style
$('#name').on("blur", function(){
// we want element #name a range of letters
var regexp = /^([A-Za-z])+$/;
// if the element #name contains a range of letters defined in var regexp
if (!nameRegex.test(fname)) {
$("#name").addClass('redborder');
return true;
}
// if the element #name is empty, does not contain string
if ( $("name").length === 0 ) {
$("#name").addClass('redborder');
return true;
}
// if we are still here, means that the element #name is valid
$("#name").addClass('greenborder');
return false;
}
// on focus name input
$("#name").on("focus", function() {
// if the input get the redborder class, then reset
if ( fname.hasClass("redborder") ){
fname.removeClass("redborder");
}
}
I am performing JavaScript validation on a simple HTML page. On error I am trying to redirect the page to Error.html, using window.location.href="Error.html".
I get the JavaScript pop displaying the error but page doesn't redirect.
JS:
function checkifFormIsFilled() {
var txtUserName = document.getElementById("txtUserName").value;
var txtFirstName = document.getElementById("txtFirstName").value;
var txtLastName = document.getElementById("txtLastName").value;
var txtEmail = document.getElementById("txtEmail").value;
var txtArea = document.getElementById("txtArea").value;
var errMessage = "";
var errorInForm = false;
if (txtUserName === "") {
errMessage = "UserName";
errorInForm = true;
}
if (txtFirstName === "") {
errMessage += ", First Name";
errorInForm = true;
}
if (txtLastName === "") {
errMessage += ", Last Name";
errorInForm = true;
}
if (txtEmail === "") {
errMessage += ", Email";
errorInForm = true;
}
if (txtArea === "") {
errMessage += ", Address";
errorInForm = true;
}
if (errorInForm == true) {
errMessage += " are required fields";
window.alert(errMessage);
//window.location.href = "Error.html";
window.navigate("Error.html");
}
}
HTML:
<form method="post" style="width: 560px; height: 850px; margin-left: 10px; margin-top:10px">
<fieldset>
<legend>New User</legend>
<table>
<tr>
<td>
<label>User Name:</label></td>
<td>
<input type="text" id="txtUserName" name="User Name" onblur="checkRequired(this)" maxlength="10" /></td>
</tr>
<tr>
<td>
<label>First Name:</label></td>
<td>
<input type="text" id="txtFirstName" name="First Name" maxlength="10" onblur="checkRequired(this)" /></td>
</tr>
<tr>
<td>
<label>Last Name:</label></td>
<td>
<input type="text" id="txtLastName" name="Last Name" maxlength="10" onblur="checkRequired(this)" /></td>
</tr>
<tr>
<td>
<label>Email: </label>
</td>
<td>
<input type="text" name="emailInput" id="txtEmail" onblur="checkRequired(this)" /></td>
</tr>
<tr>
<td>
<label for="lblAddress">Address</label></td>
<td>
<textarea id="txtArea" name="txtAddress" cols="50" rows="5" maxlength="1000" onblur="checkRequired(this)"></textarea></td>
</tr>
<tr>
<td>Groups</td>
<td>
<select name="selGroups">
<option value="c1">Employee</option>
<option value="c1">HR</option>
<option value="c1">Director</option>
</select>
</td>
</tr>
<tr>
<td>Status</td>
<td>
<select name="selStatus">
<option value="c1">Active</option>
<option value="c2">Inactive</option>
</select>
</td>
</tr>
<tr>
<td>
<input id="btnSubmit" value="Add User" type="submit" onclick="checkifFormIsFilled();" />
</td>
<td>
<button id="btnCancel">Cancel</button>
</td>
</tr>
</table>
</fieldset>
</form>
This should do:
if (errorInForm == true) {
errMessage += " are required fields";
window.alert(errMessage);
window.location = "Error.html";
}
Put the function call in an onsubmit attribute on the form element instead. You may also have to return false as well, if an error was found, to prevent it from going to the same page instead of your error page.
Try this:
<input id="btnSubmit" value="Add User" type="button" onclick="checkifFormIsFilled();" />
Since the form was submitting to itself, the redirect wasn't occurring.
DEMO