Validation not working on Javascript

Question

I have worked out how to get the alert box up but it seems to skip my other validation which is checking the other feilds, ect, any ideas as too why it is skiiping it? it would really help! I am fairly new to Javascript and HTML so could you explain it, thank you

<html>
<head>
<title>Exam entry</title>
<script language="javascript" type="text/javascript">
window.validateForm=function() {
    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.Exam_Number.value == "") {
        msg += "You must enter the exam Number \n";
        document.ExamEntry.subject.focus();
        document.getElementById('Exam_Number').style.color = "red";
        //result = false;
    }
    if (document.ExamEntry.Exam_Number.value.length != 4) {
        msg += "You must enter at least Four Numbers in the Exam Number \n";
        document.ExamEntry.Exam_Number.focus();
        document.getElementById('Exam_Number').style.color = "red";
        //result = false;
    }
    var Number = document.ExamEntry.Exam_Number.value
    if (isNaN(document.ExamEntry.Exam_Number.value)) {
        msg += "You must enter at least four numeric characters in the Exam Number feild \n";
        document.ExamEntry.Exam_Number.focus();
        document.getElementById('Exam_Number').style.color = "red";
        //result = false;
    }
    var checked = null;
    var inputs = document.getElementsByName('Exam_Type');
    for (var i = 0; i < inputs.length; i++) {
        if (!checked) {
            checked = inputs[i];
        }
    }
    if (checked == null) {
        msg += "Anything for now /n";

    } else {
        return confirm('You have chosen ' + checked.value + ' is this correct?');
    }
    if (msg == "") {
        return result;
    } {
        alert(msg)
        return false;
    }
}
</script>
</head>  
<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html">
<table width="50%" border="0">
<tr>
<td id="name">Name</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" /></td>
</tr>
<tr>
<td id="Exam_Number">Exam Number</td>
<td><input type="text" name="Exam_Number"<font size="1">(Maximum characters: 4)</font> </td>
</tr>
<tr>

<table><form action="">

<td><input type="radio" id="examtype" name="examtype" value="GCSE" /> : GCSE<br />
<td><input type="radio" id="examtype" name="examtype" value="A2" /> : A2<br />
<td><input type="radio" id="examtype" name="examtype" value="AS"/> : AS<br />
<td><input type="submit" name="Submit" value="Submit" onclick="return validateForm();" /></td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
</form>
</body>
</html>

and here is a jsfiddle

I am not sure what's your problem? I ran your code with chrome and the validation works. Can you be more specific? — Uri Lukach
– Uri Lukach, Commented Feb 14, 2014 at 9:49
What do you mean by skips your other validation ? It seems to produce the correct messages for me in firefox — Dominic Green
– Dominic Green, Commented Feb 14, 2014 at 9:51
Prepare fiddle please..it takes only 5 seconds to cpy and paste your code..please — Deepak Ingole
– Deepak Ingole, Commented Feb 14, 2014 at 9:53
I suggest starting to debug yourself. There are a lot of problems with your code. — putvande
– putvande, Commented Feb 14, 2014 at 9:56

Juergen Riemer · Accepted Answer · 2014-02-14 09:53:34Z

1

Change:

var inputs = document.getElementsByName('Exam_Type');

to

var inputs = document.getElementsByName('examtype');

It seems you picked the wrong name for the radio elements.

answered Feb 14, 2014 at 9:53

Juergen Riemer

1,4732 gold badges14 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

V31 · Accepted Answer · 2014-02-14 10:17:52Z

0

Your for loop was checking the radio buttons incorrectly.

Code:

for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].checked) {
        checked = inputs[i];
    }
}

Please find the working fiddle here http://jsfiddle.net/sDLV4/2/

answered Feb 14, 2014 at 10:17

V31

7,6643 gold badges28 silver badges44 bronze badges

Comments

Rajanikumar · Accepted Answer · 2014-02-14 12:01:31Z

0

I changed code here please check...

Please find the working fiddle here

http ://jsfiddle.net/sDLV4/3/

edited Feb 14, 2014 at 12:01

answered Feb 14, 2014 at 11:12

Rajanikumar

231 gold badge2 silver badges5 bronze badges

Comments

Gerd Wagner · Accepted Answer · 2014-02-14 15:39:11Z

Using HTML5 constraint validation, much of your code can be dropped, see my revision below. In addition to the wrong radio button group name pointed out by Juergen Riemer, your code has the following issues:

Better use the HTML5 DOCTYPE declaration, see below
Instead of <script language="javascript" type="text/javascript"> just use <script>. The script element does not have a language attribute, and the type attribute has the value "text/javascript" by default.
Do not define your validation function on the window object, but rather as global function (as below), or preferably as a member of a namespace object.
Instead of setting the form's name attribute to "ExamEntry", rather set its id attribute and reference the form of a variable like var examForm = document.forms["ExamEntry"];
Your HTML code is not well-formed, because in your form's table, on line 79, you start another table element with another form element, both of which do not have an end tag.
Also, it's preferable to us CSS for the form layout, instead of a table.

In my revision below I'm using a Pure CSS stylesheet for styling forms, and corresponding class values in certain elements.

For more about constraint validation in general and the HTML5 constraint validation features, see this tutorial.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Exam entry</title>
 <link rel="stylesheet" href="http://yui.yahooapis.com/combo?pure/0.3.0/base-min.css&pure/0.3.0/forms-min.css" />
<script>
function validateForm() {
  var result = true;
  var msg = "";
  var checked = null;
  var examForm = document.forms['ExamEntry'];
  var inputs = examForm.examtype;

  for (var i = 0; i < inputs.length; i++) {
    if (!checked) {
      checked = inputs[i];
    }
  }
  if (!checked) {
    msg += "Anything for now /n";
  } else {
    return confirm('You have chosen ' + checked.value + ' is this correct?');
  }
  if (msg == "") {
    return result;
  } else {
    alert(msg)
    return false;
  }
}
</script>
</head>  
<body>
<h1>Exam Entry Form</h1>
<form id="ExamEntry"  class="pure-form pure-form-aligned" method="post" action="success.html">
  <div class="pure-control-group">
    <label for="exNo">Exam Number:</label>
    <input id="exNo" name="Exam_Number" required="required" pattern="\d{4}" title="You must enter a 4-digit exam number" />
  </div>
  <div class="pure-control-group">
    <label>Exam type:</label>
    <label class="pure-radio"><input type="radio" name="examtype" value="GCSE" /> GCSE</label>
    <label class="pure-radio"><input type="radio" name="examtype" value="A2" /> A2</label>
    <label class="pure-radio"><input type="radio" name="examtype" value="AS" /> AS</label>
  </div>
  <div class="pure-controls">
    <button type="submit" class="pure-button pure-button-primary" onclick="return validateForm();">Submit</button>
    <button type="reset" class="pure-button">Reset</button>
  </div>
</form>
</body>
</html>

as it is coursework and we are allowed help i dont have acsess to HTML 5 in school, and i must use the code given, this make it alot harder, any ideas?

Collectives™ on Stack Overflow

Validation not working on Javascript

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related