Javascript form validation submit button issue - javascript

The problem is that the code works absolutely fine for displaying the validation errors once I click on the submit button, but after the messages are displayed.. and again when I click on the submit button (without reloading ie. the error messages are still on the display), it redirects to the success page even though it has error messages.
Have a look at the code:
var flag = 0;
function username() {
usrn = document.form1.txt.value;
if (usrn == "") {
document.getElementById("user").innerHTML = "Please enter a username";
flag = 1;
} else if (usrn.length < 8) {
document.getElementById("user").innerHTML = "minimum 8 characters required";
flag = 1;
}
}
function password() {
pass = document.form1.pass.value;
cpass = document.form1.cpass.value;
if (pass == "") {
document.getElementById("password").innerHTML = "Please enter a password";
flag = 1;
} else if (pass.length < 8) {
document.getElementById("password").innerHTML = "minimum 8 characters required";
flag = 1;
} else if (cpass == "") {
document.getElementById("cpassword").innerHTML = "Please confirm password";
flag = 1;
} else if (cpass != pass) {
document.getElementById("cpassword").innerHTML = "passwords do not match";
flag = 1;
} else
return;
}
function cpassword() {
cpass = document.form1.cpass.value;
pass = document.form1.pass.value;
if (cpass == "") {
document.getElementById("cpassword").innerHTML = "Please confirm password";
flag = 1;
} else if (cpass != pass) {
document.getElementById("cpassword").innerHTML = "passwords do not match";
flag = 1;
} else
return;
}
function email() {
email = document.form1.em.value;
if (email == "") {
document.getElementById("emailid").innerHTML = "Please enter Email-ID";
flag = 1;
}
}
function check(form) {
flag = 0;
username();
password();
email();
if (flag == 1) {
return false;
} else {
return true;
}
}
<form name="form1" action="success.html" onSubmit="return check(this)" method="post">
<table cellpadding="10">
<tr>
<caption>FILL FORM</caption>
</tr>
<tr>
<td>
<label for="txt">Enter Username</label>
</td>
<td>
<input type="text" id="txt">
<div class="error" id="user" onBlur="username()"></div>
</td>
</tr>
<tr>
<td>
<label for="pass">Enter Password</label>
</td>
<td>
<input type="password" id="pass" onBlur="password()">
<div class="error" id="password"></div>
</td>
</tr>
<tr>
<td>
<label for="cpass">Confirm Password</label>
</td>
<td>
<input type="password" id="cpass" onBlur="password()">
<div class="error" id="cpassword"></div>
</td>
</tr>
<tr>
<td>
<label for="em">Enter Email-ID</label>
</td>
<td>
<input type="email" id="em" onBlur="email()">
<div class="error" id="emailid"></div>
</td>
</tr>
<tr>
<td colspan=2>
<button type="submit" class="btn">Submit</button>
</td>
</tr>
</table>
</form>
thank you

Here is a snippet to work with.
There are few issues in the code:
In the function email(), you are assigning value to the email variable.
There are many variables created NOT within the function scope.
More optimizations can be made rather than using global functions and variables which will make the code more readable and maintainable.
var flag = 0;
function username() {
var usrn = document.form1.txt.value;
if (usrn == "") {
document.getElementById("user").innerHTML = "Please enter a username";
flag = 1;
} else if (usrn.length < 8) {
document.getElementById("user").innerHTML = "minimum 8 characters required";
flag = 1;
}
}
function password() {
var pass = document.form1.pass.value;
var cpass = document.form1.cpass.value;
if (pass == "") {
document.getElementById("password").innerHTML = "Please enter a password";
flag = 1;
} else if (pass.length < 8) {
document.getElementById("password").innerHTML = "minimum 8 characters required";
flag = 1;
} else if (cpass == "") {
document.getElementById("cpassword").innerHTML = "Please confirm password";
flag = 1;
} else if (cpass != pass) {
document.getElementById("cpassword").innerHTML = "passwords do not match";
flag = 1;
} else
return;
}
function cpassword() {
var cpass = document.form1.cpass.value;
var pass = document.form1.pass.value;
if (cpass == "") {
document.getElementById("cpassword").innerHTML = "Please confirm password";
flag = 1;
} else if (cpass != pass) {
document.getElementById("cpassword").innerHTML = "passwords do not match";
flag = 1;
} else
return;
}
function email() {
var emailValue = document.form1.em.value;
if (emailValue == "") {
document.getElementById("emailid").innerHTML = "Please enter Email-ID";
flag = 1;
}
}
function check(form) {
flag = 0;
username();
password();
email();
if (flag == 1) {
console.log("False");
return false;
} else {
console.log("True");
return true;
}
}
<form name="form1" action="success.html" onsubmit="return check(this)" method="post">
<table cellpadding="10">
<tr>
<caption>FILL FORM</caption>
</tr>
<tr>
<td>
<label for="txt">Enter Username</label>
</td>
<td>
<input type="text" id="txt">
<div class="error" id="user" onBlur="username()"></div>
</td>
</tr>
<tr>
<td>
<label for="pass">Enter Password</label>
</td>
<td>
<input type="password" id="pass" onBlur="password()">
<div class="error" id="password"></div>
</td>
</tr>
<tr>
<td>
<label for="cpass">Confirm Password</label>
</td>
<td>
<input type="password" id="cpass" onBlur="password()">
<div class="error" id="cpassword"></div>
</td>
</tr>
<tr>
<td>
<label for="em">Enter Email-ID</label>
</td>
<td>
<input type="email" id="em" onBlur="email()">
<div class="error" id="emailid"></div>
</td>
</tr>
<tr>
<td colspan=2>
<button type="submit" class="btn">Submit</button>
</td>
</tr>
</table>
</form>

whenever there is validation error. return false from the function. it should fix this.

Related

How do I display a form data containing first name last name email and password validations in the same page using JavaScript

<!DOCTYPE html>
<html>
<head>
<script>
function validateform() {
var status = true;
var f = document.forms["myForm"]["fname"];
var l = document.forms["myForm"]["lname"];
var a = document.forms["myForm"]["age"];
var g = document.forms["myForm"]["gender"];
var m = document.forms["myForm"]["mobile"];
var u = document.forms["myForm"]["uname"];
if (f.value == "") {
document.getElementById("fname-error").innerHTML = "Please Enter your First
Name";
document.getElementById("fname-error").style.color = "Red";
status = false;
} else {
document.getElementById("fname-error").innerHTML = "Valid First Name";
document.getElementById("fname-error").style.color = "Green";
status = true;
}
if (l.value == "") {
document.getElementById("lname-error").innerHTML = "Please Enter your Last
Name";
document.getElementById("lname-error").style.color = "Red";
status = false;
} else {
document.getElementById("lname-error").innerHTML = "Valid Last Name";
document.getElementById("lname-error").style.color = "Green";
status = true;
}
if (a.value == "") {
document.getElementById("age-error").innerHTML = "Please Enter your age";
document.getElementById("age-error").style.color = "Red";
status = false;
} else {
document.getElementById("age-error").innerHTML = "Age Selected";
document.getElementById("age-error").style.color = "Green";
status = true;
}
if (g.value == "") {
document.getElementById("gender-error").innerHTML = "Please select your
gender";
document.getElementById("gender-error").style.color = "Red";
status = false;
} else {
document.getElementById("gender-error").innerHTML = "Gender Selected";
document.getElementById("gender-error").style.color = "Green";
status = true;
}
if (m.value.length < 10 || m.value.length > 10) {
document.getElementById("mobile-error").innerHTML = "Please Enter a valid
Mobile Number";
document.getElementById("mobile-error").style.color = "Red";
status = false;
} else {
document.getElementById("mobile-error").innerHTML = "Valid Mobile Number";
document.getElementById("mobile-error").style.color = "Green";
status = true;
}
if (u.value == "") {
document.getElementById("uname-error").innerHTML = "Please Choose a
Username";
document.getElementById("uname-error").style.color = "Red";
status = false;
} else {
document.getElementById("uname-error").innerHTML = "Valid Username";
document.getElementById("uname-error").style.color = "Green";
status = true;
}
return true;
}
function checkPass(passId) {
if (/^(?=.*[0-9])(?=.*[!##$%^&*])[a-zA-Z0-9!##$%^&*]{6,16}$/.test(passId)) {
document.getElementById("pass1-error").innerHTML = "You have entered valid
Password.";
document.getElementById("pass1-error").style.color = "Green";
return true;
}
return false;
}
function ValidatePassid() {
var passID = document.forms["myForm"]["passid1"];
if ((passID.value == null) || (passID.value == "")) {
document.getElementById("pass1-error").innerHTML = "Please Enter your
password";
document.getElementById("pass1-error").style.color = "Red";
passID.focus();
return false;
}
if (checkPass(passID.value) == false) {
passID.value = "";
document.getElementById("pass1-error").innerHTML = "Invalid Password";
document.getElementById("pass1-error").style.color = "Red";
passID.focus();
return false;
}
return true;
}
function Validate() {
var pass1 = document.forms["myForm"]["passid1"];
var pass2 = document.forms["myForm"]["passid2"];
if (pass1.value != pass2.value) {
document.getElementById("pass2-error").innerHTML = "Passwords do not
match.";
document.getElementById("pass2-error").style.color = "Red";
return false;
} else {
document.getElementById("pass2-error").innerHTML = "Passwords match.";
document.getElementById("pass2-error").style.color = "Green";
return true;
}
return true;
}
function checkEmail(emailId) {
if (/^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(emailId)) {
document.getElementById("email-error").innerHTML = ("You have entered a
valid email");
document.getElementById("email-error").style.color = "Green";
return true;
}
return false;
}
function ValidateEmail() {
var emailID = document.forms["myForm"]["email"];
if ((emailID.value == null) || (emailID.value == "")) {
document.getElementById("email-error").innerHTML = "Please Enter your Email
ID";
document.getElementById("email-error").style.color = "Red";
emailID.focus();
return false;
}
if (checkEmail(emailID.value) == false) {
emailID.value = "";
document.getElementById("email-error").innerHTML = "Invalid Email Adderess";
document.getElementById("email-error").style.color = "Red";
emailID.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<form name="myForm" id="MyForm">
<fieldset>
<legend>
<h4>Registration Form</h4>
</legend>
<table>
<tr>
<td>First Name:</td>
<td>
<input type="text" name="fname" />
<div id="fname-error" class="error"></div>
</td>
</tr>
<tr>
<td>Last Name:</td>
<td>
<input type="text" name="lname" />
<div id="lname-error" class="error"></div>
</td>
</tr>
<tr>
<td>Age:</td>
<td>
<input type="number" name="age" minlength ="0" maxlength = "100"/>
<div id="age-error" class="error"></div>
</td>
</tr>
<tr>
<td>Gender:</td>
<td>
<input list="genders" name="gender" />
<datalist id="genders">
<option value="Male">
<option value="Female">
<option value="Other">
</datalist>
<div id="gender-error" class="error"></div>
</td>
</tr>
<tr>
<td>Mobile:</td>
<td>
<input type="number" name="mobile" minlength="10" maxlength ="10"/>
<div id="mobile-error" class="error"></div>
</td>
</tr>
<tr>
<td>Username:</td>
<td>
<input type="userid" name="uname" />
<div id="uname-error" class="error"></div>
</td>
</tr>
<tr>
<td>Password:</td>
<td>
<input type="password" name="passid1" minlength="6" />
<div id="pass1-error" class="error"></div>
</td>
</tr>
<tr><td>Confirm Password:</td>
<td>
<input type="password" name="passid2" minlength="6"/>
<div id="pass2-error" class="error"></div>
</td>
</tr>
<tr>
<td>E-mail:</td>
<td>
<input type="email" name="email" />
<div id="email-error" class="error"></div>
</td>
</tr>
<tr>
<td colspan="2">
<button onlick="return !!(validateform() & ValidatePassid() &
Validate() & ValidateEmail())">Submit</button>
<span id="display">
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
I should not use any server side languages since it is a school project, I tried to display the data using onclick but it is not working. Can any one solve this problem and guide me through it. Even if you suggest to use any server side languages I can't use them, because they didn't teach those. Only basic JavaScript can be used to dispaly the form values.
Use jQuery validation js...the prior reason for suggesting you is that you don't have to do manual code as that js will automatically track this.
https://jqueryvalidation.org/
Hope, this will help you.

How can I do live validation for radio button on click event just like we do for textbox on keyup event?

I want to know how can i live validate radio button like text box on click event or on key up or press event? Like textbox, when we start typing and if it passes validation, then error message is gone; in the same way i want to implement this functionality for radio button. I have the following code which works only for textbox on keyup event and not for radio buttons -
HTML -
<form name="form1" id="form1" method="post" action="">
<table border="0" align="center" width="50%" cellpadding="5">
<tr>
<th align="right" valign="top"><label for="txtemail">Email ID:</label></th>
<td>
<input type="text" name="txtemail" id="txtemail" size="30" onKeyUp="return isValid();" />
<span id="erremail"></span>
</td>
</tr>
<tr>
<th align="right" valign="top"><label>Gender:</label></th>
<td>
<input type="radio" name="gender" id="radmale" value="Male" onClick="this.checked; return isValid();" />
<label for="radmale">Male</label>
<input type="radio" name="gender" id="radfemale" value="Female" onClick="return isValid();" />
<label for="radfemale">Female</label>
<span id="errgender"></span>
</td>
</tr>
<tr>
<td align="right">
<input type="submit" name="btnsubmit" value="Register" onClick="return isValid();">
</td>
<td>
<input type="reset" value="Clear Form">
</td>
</tr>
</table>
</form>
JavaScript -
<script type="text/javascript">
var flag;
function isValid()
{
flag = true;
reqdField("txtemail", "erremail", "Email ID is empty");
isValidEmail("txtemail", "erremail", "Email ID is not valid", /^[a-z0-9_.-]+#[a-z-.]+\.[a-z.]{2,5}$/);
checkGender("radmale", "radfemale", "errgender", "Select your gender");
return flag;
}
// checking all required fields
function reqdField(ctrid, errid, errmsg)
{
var str = document.getElementById(ctrid).value;
if(str.length == 0)
{
document.getElementById(errid).innerHTML = errmsg;
flag = false;
}
else
{
document.getElementById(errid).innerHTML = "";
}
}
// checking is email id valid
function isValidEmail(ctrid, errid, errmsg, validExp)
{
var email = document.getElementById(ctrid).value;
if(email.match(validExp) == null)
{
document.getElementById(errid).innerHTML = errmsg;
flag = false;
}
else
{
document.getElementById(errid).innerHTML = "";
}
}
// checking is gender selected
function checkGender(ctrid1, ctrid2, errid, errmsg)
{
var male = document.getElementById(ctrid1);
var female = document.getElementById(ctrid2);
if(male.checked == false && female.checked == false)
{
document.getElementById(errid).innerHTML = errmsg;
flag = false;
}
else
{
document.getElementById(errid).innerHTML = "";
}
}
</script>
Another issue I am facing in this code is regarding reqdField() function. This function does work and only isValidEmail() runs. I only see email is not valid when it is left empty and can not display email id is empty. How can i achieve the same?
Here is the demo JSFiddle
<script type="text/javascript">
var flag;
function isValid()
{
flag = true;
reqdField("txtemail", "erremail", "Email ID is empty");
isValidEmail("txtemail", "erremail", "Email ID is not valid", /^[a-z0-9_.-]+#[a-z-.]+\.[a-z.]{2,5}$/);
checkGender();
return flag;
}
// checking all required fields
function reqdField(ctrid, errid, errmsg)
{
var str = document.getElementById(ctrid).value;
if(str.length == 0)
{
document.getElementById(errid).innerHTML = errmsg;
flag = false;
}
else
{
document.getElementById(errid).innerHTML = "";
flag = true;
}
}
// checking is email id valid
function isValidEmail(ctrid, errid, errmsg, validExp)
{
var email = document.getElementById(ctrid).value;
if(email.length == 0){
return;
}else{
if(email.match(validExp) == null)
{
document.getElementById(errid).innerHTML = errmsg;
flag = false;
}
else
{
document.getElementById(errid).innerHTML = "";
flag = true;
}
}
}
// checking is gender selected
function checkGender()
{
var ctrid1="radmale", ctrid2="radfemale", errid="errgender", errmsg="Select your gender"
var male = document.getElementById(ctrid1);
var female = document.getElementById(ctrid2);
if(male.checked == false && female.checked == false)
{
document.getElementById(errid).innerHTML = errmsg;
return false;
flag = false;
}
else
{
document.getElementById(errid).innerHTML = "";
return true;
}
}
</script>
and html is
<form name="form1" id="form1" method="post" action="">
<table border="0" align="center" width="50%" cellpadding="5">
<tr>
<th align="right" valign="top"><label for="txtemail">Email ID:</label></th>
<td><input type="text" name="txtemail" id="txtemail" size="30" onKeyUp="return isValid();" />
<span id="erremail"></span>
</td>
</tr>
<tr>
<th align="right" valign="top"><label>Gender:</label></th>
<td><input type="radio" name="gender" id="radmale" value="Male" onClick="return checkGender();" /><label for="radmale">Male</label>
<input type="radio" name="gender" id="radfemale" value="Female" onClick="return checkGender();" /><label for="radfemale">Female</label>
<span id="errgender"></span>
</td>
</tr>
<tr>
<td align="right"><input type="submit" name="btnsubmit" value="Register" onClick="return isValid();"></td>
<td><input type="reset" value="Clear Form"></td>
</tr>
</table>
</form>
Fiddle
$("input[type=radio]").click(function(){
var set = $(this).attr("name");
validateRadioSet(set);
});

JavaScript Button Error

The issue I have with my JavaScript is that when I select the "Send" button for a blank form, it tells me which fields to complete (which I want). After selecting "OK", it asks me to "Please enter a valid email address." in another window.
Can anyone help me with the functions and logic to eliminate this second window if one selects "Send" without filling out the form? Do I need to create a new function for "Entering a valid email address"?
Here's the code:
javascript
function checkforblank() {
var errormessage = "";
if (document.getElementById('fname').value =="") {
errormessage += "enter your first name \n";
}
if (document.getElementById('lname').value =="") {
errormessage += "enter your last name \n";
}
if (document.getElementById('email').value =="") {
errormessage += "enter your email \n";
}
if (document.getElementById('confirmEmail').value =="") {
errormessage += "confirm your email \n";
}
if (errormessage != "") {
alert(errormessage);
return false;
}
};
function verifyEmail() {
var status = false;
var emailRegEx = /^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
if (document.myForm.email.value.search(emailRegEx) == -1) {
alert("Please enter a valid email address.");
}
else if (document.myForm.email.value != document.myForm.confirmEmail.value) {
alert("Email addresses do not match. Please retype them to make sure they are the same.");
}
else {
alert("Thank you for your interest!");
status = true;
}
return status;
}
function confirmEmailAddresses() {
checkforblank();
verifyEmail();
}
html
<div id="content">
<form name="myForm" action="#" method="get" enctype="application/x-www-form-urlencoded" onsubmit="">
<table width="377" height="96">
<tr>
<td style="text-align: right">First Name:</td>
<td><label for="FirstName"></label>
<input type="text" name="fname" id="fname"></td>
</tr>
<tr>
<td style="text-align: right">Last Name:</td>
<td><label for="LastName"></label>
<input type="text" name="lname" id="lname"></td>
</tr>
<tr>
<td style="text-align: right">E-mail:</td>
<td><input type="email" name="email" id="email"></td>
</tr>
<tr>
<td style="text-align: right">Confirm E-mail:</td>
<td><input type="email" name="confirmEmail" id="confirmEmail"></td>
</tr>
</table>
<input type="submit" value="Send" onClick="confirmEmailAddresses()"><input type="reset" value="Reset Form">
</form>
</div>
I'm fairly new to JavaScript, so please make this as easy as possible! :) Thank you.
replace
function confirmEmailAddresses(){
checkforblank();
verifyEmail();
}
with
function confirmEmailAddresses(){
if ( checkforblank() ) {
verifyEmail();
}
}
and add else return true; like so
if (errormessage != "") {
alert(errormessage);
return false;
} else return true;
so if (in the checkforblank() function) errormessage is not (!=) empty ("") then checkforblank() tells the script (returns) true and if (in confirmEmailAddresses() now) and only if checkforblank() is truthy (true is kinda pretty truthy) then verifyEmail() is run, the end (;). :p
Is this what you want?
function confirmEmailAddresses() {
if(checkforblank() && verifyEmail())
return true;
else return false;
}
ok i think what your asking for is this (jquery)
$(":submit").click( function(event) {
if(!checkforblank() || !verifyEmail()) {
event.preventDefault();
}
});
if you do this make sure to include after then button in the html. or enclose in a $(document).ready

javascript email validation not working [duplicate]

This question already has answers here:
How can I validate an email address in JavaScript?
(79 answers)
Closed 8 years ago.
I am validating my form using javascript validation as whole validation is working fine but email validation is not working. My form code is as follows
<form method="post" action="contact.php" name="myForm" onsubmit="return validateForm()">
<h3>To know more contact us today.</h3>
<table>
<tr>
<td>Name:
<br />
<input id="name" name="name" type="text" />
</td>
</tr>
<tr>
<td>Contact No:
<br />
<input id="contact" name="contact" type="text" />
</td>
</tr>
<tr>
<td>Email:
<br />
<input id="email" type="text" name="email" />
</td>
</tr>
<tr>
<td>Address:
<br />
<textarea cols="34" id="address" name="address" type="text"></textarea>
</td>
</tr>
<tr>
<td>
<input type="submit" value="Submit" />
</td>
</tr>
</table>
</form>
and my javascript code is as follows
<script type="text/javascript">
function validateEmail() {
var emailID = document.["myForm"]["email"].value;
atpos = emailID.indexOf("#");
dotpos = emailID.lastIndexOf(".");
if (atpos < 1 || (dotpos - atpos < 2)) {
alert("Please enter correct email ID")
document.myForm.email.focus();
return false;
}
return (true);
}
function validateForm() {
var x = document.forms["myForm"]["name"].value;
if (x == null || x == "") {
alert("First name must be filled");
return false;
}
var x = document.forms["myForm"]["contact"].value;
if (x == null || x == "" || isNaN(document.myForm.contact.value) || document.myForm.contact.value.length != 10) {
alert("Contact Number Must be 10 Digits");
return false;
}
var x = document.forms["myForm"]["email"].value;
if (x == null || x == "") {
alert("Email is must");
return false;
}
else {
var ret = validateEmail();
if (ret == false) {
return false;
}
}
var x = document.forms["myForm"]["address"].value;
if (x == null || x == "") {
alert("Address cannot be empty");
return false;
}
return (true);
}
</script>
var emailID = document.["myForm"]["email"].value;
^^
Syntax error. Dot-notation or Square-bracket-notation. Pick only one (per property).
I'm surprised that Firebug / Chrome Developer Tools / Dragonfly / etc didn't give you a clear pointer to that when you were testing.

Alert box shows up multiple times on javascript

This is very simple code, and similar to my other question.
When I click submit, the alert box shows up three times for option one, twice for two, and once for three.
Here is the part of the code where the problem is most probably located:
var chosen = ""
var len = document.ExamEntry.r1.length
for (var i = 0; i < len; i++) {
if (document.ExamEntry.r1[i].checked) {
chosen = document.ExamEntry.r1[i].value
}
if (chosen != "") {
confirm(chosen)
}
}
And here is my whole code. It all works fine except for this.
<!-- saved from url=(0055)file:///C:/Users/Bartek/Downloads/Exam%20entry4.1.2.htm -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"></head><body><h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="file:///C:/Users/Bartek/Downloads/success.html">
<input type="radio" name="r1" value="GCSE">GCSE
<input type="radio" name="r1" value="AS">AS
<input type="radio" name="r1" value="A2">A2
<table width="50%" border="0">
<tbody>
<tr>
<td id="name" style="color: black; ">Name</td>
<td>
<input type="text" name="name">
</td>
</tr>
<tr>
<td id="subject" style="color: black; ">Subject</td>
<td>
<input type="text" name="subject">
</td>
</tr>
<tr>
<td id="enumber" style="color: black; ">Examination Number</td>
<td>
<input type="text" name="enumber">
</td>
</tr>
<tr>
<td>
<input type="submit" name="Submit" value="Submit" onclick=" return validateForm();">
</td>
<td>
<input type="reset" name="Reset" value="Reset">
</td>
</tr>
</tbody></table>
</form>
<script>
function validateForm() {
var result = true;
var msg = "";
if (document.ExamEntry.name.value == "") {
msg += "You must enter your name \n";
document.ExamEntry.name.focus();
document.getElementById('name').style.color = "red";
result = false;
}
if (document.ExamEntry.subject.value == "") {
msg += "You must enter the subject \n";
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color = "red";
result = false;
}
if (document.ExamEntry.enumber.value.length != 4) {
msg += "The examination number must be exactly four characters long \n";
document.ExamEntry.enumber.focus();
document.getElementById('enumber').style.color = "red";
result = false;
}
var chosen = ""
var len = document.ExamEntry.r1.length
for (var i = 0; i < len; i++) {
if (document.ExamEntry.r1[i].checked) {
chosen = document.ExamEntry.r1[i].value
}
if (chosen != "") {
confirm(chosen)
}
}
if (msg == "") {
return result;
} {
alert(msg);
return result;
}
}
</script>
</body>
</html>
This is GCSE computing coursework.
for (var i = 0; i <len; i++) {
if (document. ExamEntry.r1[i].checked) {
chosen = document. ExamEntry.r1[i].value
}
if (chosen != "") {
confirm(chosen)
}
}
chosen won't be "" if it was set before; you don't set it back to "" if the item wasn't checked, and so it'll confirm the last one that was. Just merge them.
for(var i = 0; i < document.ExamEntry.r1.length; i++) {
if(document.ExamEntry.r1[i].checked) {
confirm(document.ExamEntry.r1[i].value);
}
}
You were missing an else.
if (!msg) {
return result;
} else {
alert(msg);
return result;
}

Categories