0

I've went over this code a number of times but I can't see where the issue lies.
I'm trying to make the age text field numeric only however it won't validate

If someone can point what I'm doing wrong here it be greatly appreciated :)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Java Script form</title>
<link href="styles/main.css" rel="stylesheet" type="text/css">

<script type="text/javascript">

function validateForm() {

    var name_val= document.getElementById("input_name").value;

    if (name_val ==null || name_val =="") {

        alert("Please enter your name");
        return false;
    }

    var age_val= document.getElementById("input_age").value;

    if (age_val ==null || age_val =="") {

        alert("Please enter your age");
        return false;
}

var prof_val= document.getElementById("input_profession").value;

    if (prof_val ==null || prof_val =="") {

        alert("Please enter your profession");
        return false;

    }

    var email_val= document.getElementById("input_email").value;

    if (email_val ==null || email_val =="") {

        alert("Please enter your email");
        return false;

    }

    var email2_val= document.getElementById("input_confirm_email").value;

    if (email2_val ==null || email2_val =="") {

        alert("Please Re-enter your email");
        return false;

    }


}

function IsNumeric() {
    var numcheck= document.getElementById("input_age").value;

    var num = '0123456789';

    for (i=0; i < numcheck.length; i++) {
        if(num.indexOf(numcheck.charAt(i)) == -1) {
            alert("Please enter numeric value");
            return false;

        }

        return true;
    }

}




</script>

</head>

<body>
<h1>Lecture 20 - JavaScript form </h1>
<form id="Jscript_form" name="Javascriptform" method="get" onSubmit="validateForm();" >
  <p>
    <label for="name">Name (max 20 Characters):</label>
    <input type="text" name="name" id="input_name">
  </p>
  <p>
    <label for="age">Age (1 - 100):</label>
    <input type="text" name="age" id="input_age">
  </p>
  <p>
    <label for="profession">Profession:</label>
    <input type="text" name="profession" id="input_profession">
  </p>
  <p>
    <label for="email">Email Address:</label>
    <input type="text" name="email" id="input_email">
  </p>
  <p>
    <label for="confirm_email">Comfirm Email Address:</label>
    <input type="text" name="confirm_email" id="input_confirm_email">
  </p>
  <p>
    <input type="submit" name="submit" id="submit" value="Submit">
  </p>
</form>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>





</script>

</head>

<body>
<h1>Lecture 20 - JavaScript form </h1>
<form id="Jscript_form" name="Javascriptform" method="get" onSubmit="validateForm();" >
  <p>
    <label for="name">Name (max 20 Characters):</label>
    <input type="text" name="name" id="input_name">
  </p>
  <p>
    <label for="age">Age (1 - 100):</label>
    <input type="text" name="age" id="input_age">
  </p>
  <p>
    <label for="profession">Profession:</label>
    <input type="text" name="profession" id="input_profession">
  </p>
  <p>
    <label for="email">Email Address:</label>
    <input type="text" name="email" id="input_email">
  </p>
  <p>
    <label for="confirm_email">Comfirm Email Address:</label>
    <input type="text" name="confirm_email" id="input_confirm_email">
  </p>
  <p>
    <input type="submit" name="submit" id="submit" value="Submit">
  </p>
</form>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>
4
Contributors
6
Replies
26
Views
2 Years
Discussion Span
Last Post by AleMonteiro
0

Hello there @Gl753

I can suggest/assist you about using HTML5 with the support for those things like email numbers and etc. you can use those so that you wont have a hard time using javascript.

w3schools

note: this is only a suggestion.

0

Yes I have used IsNumeric function , but it won't give me an error when I type in non numeric values like it's supposed to.

My age text field has the ID of input_age which is being called in the IsNumeric function but it's not being picked up for some reason

0

GI753, can you post the code where you use IsNumeric? It isn't in the code you posted.

Could be something like this:

if (age_val ==null || age_val =="" ) {
        alert("Please enter your age");
        return false;
}
else if ( ! IsNumeric(age_val) ) {
    return false;
}

And I just realized that your IsNumeric function is returning at the wrong moment, should be like this(ajusted for recieving arguments):

function IsNumeric(numcheck) {
    var num = '0123456789';
    for (i=0; i < numcheck.length; i++) {
        if(num.indexOf(numcheck.charAt(i)) == -1) {
            alert("Please enter numeric value");
            return false;
        }
    }
    return true;
}

If you can use jQuery and want some out of the box, I suggest using jQuery Meio Mask, quite useful.

Edited by AleMonteiro

0

Brilliant,
I was reading from a few notes but I must have missed the line of the else statment
Thanks for the help :)

Edited by Gl753

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.