HTML Field Form validation with JavaScript

Question

I have the following code that acts as an interface to the http://www.random.org/integers/ . What I want to do is to validate all the form fields and display alert boxes or such with JavaScript. An example would be setting the numbers to be in a certain range ( in the integer case the min and max) and if they're out of range display a box saying the number has to be between 1 and 1000.

The problem that I am encountering is that the form sends me directly to the random.org website, without taking into consideration my script, it won't even display an alert box it just sends me to their website.

Here's the code.

<form method="get" action="http://www.random.org/integers/">

    <p> Generate 
        <input type="text" name="num" value="100" size="6" maxlength="5" /> 
                    random integers (maximum 10,000).
    </p>

    <p>Each integer should have a value between 
        <input type="text" name="min" value="1" size="12" maxlength="10" /> and 
        <input type="text" name="max" value="100" size="12" maxlength="10" />

    </p>

    <p>Format in 
        <input type="text" name="col" value="5" size="2" maxlength="6" /> columns.
    </p>
    <p> Choose your base: 
         <select name="base">
              <option value="2"> 2 </option>
              <option value="8"> 8 </option>
              <option value="10"> 10 </option>
         </select>

    </p>


    <p>
         <input type="submit" class="submit" value="Get Numbers" onsubmit="analert()" />
         <input type="reset" class="submit" value="Reset Form" />
         <input type="button" class="submit" value="Switch to Advanced Mode"/>
    </p>

    </form>

And the Script:

<script>
function analert()
{
alert("Tralalala");
}
</script>

How can I make this work, display an alert box that says the number is out of range, without being redirected to the random.org website which tells me that the number is out of range?

This is the html, where is the javascript, and what have you tried to do to solve this problem? — Nafiul Islam
– Nafiul Islam, Commented Nov 1, 2013 at 11:28
you can do two things 1. either check for validation at when numbers are typed in input box and disable submitt button till all validation are ensured or 2. do not use form submission as form action method indeed on submit call a function to check all validation are ensured and if yes manually trigger the form submit event — Vinod Louis
– Vinod Louis, Commented Nov 1, 2013 at 11:29
I've added the script, my problem is that it won't take into consideration any of the script, it directly takes the action of the form and redirects me to the website. Indeed I've done something to it so the -1 is unfonded. — Contourette.
– Contourette., Commented Nov 1, 2013 at 11:36
ya because of the form action its creating the problem wait i update a fiddle to solve it — Vinod Louis
– Vinod Louis, Commented Nov 1, 2013 at 11:40

Vinod Louis · Accepted Answer · 2013-11-01 11:43:05Z

1

you have to check for validation and then decide whether to submit form or not

see here in fiddle

however i have just done for one case you add your further validation try any negative value for generate it will give you error and form will not be submitted

function check(){
if($("#generate").val() < 0 || $("#generate").val() > 10000){
    alert("generate number should be less than 10000");
    return;
}
//add your further condition here

$("#frmsub").click();

}

answered Nov 1, 2013 at 11:43

Vinod Louis

4,9061 gold badge31 silver badges50 bronze badges

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

6 Comments

Contourette. Over a year ago

This makes sense. But if I do this and specify an id to each, and then script it like :

function check(){     if($("#generate").val() < 0 || $("#generate").val() > 10000){         alert("generate number should be less than 10000");         return;     }     else if ($("minim").val()< -1000000000|| $("maxim").val() > 1000000000){         alert("The number should be between -1,000,000,000 and 1,000,000,000);          return;     }     //add your further condition here          $("#frmsub").click(); }

it doesn't display the alert for the min, max thing.

Contourette. Over a year ago

I added the # on the ids but still.

Contourette. Over a year ago

So it won't work with double condition, help me out with some more questions in the future? An email or something.

Vinod Louis Over a year ago

yes sure, it works in either case or condition see this jsfiddle.net/vinodlouis/5C7yA/4

Contourette. Over a year ago

How can I check if the input field is numeric or not? Like if I enter letters instead of numbers, to pop an alert that it says numbers only or something like that?

|

Fenton · Accepted Answer · 2013-11-01 11:31:29Z

0

You can start by using some of the input types defined in HTML5:

<input type="number" name="num" maxlength="5" min="20" max="200" step="1" value="100" size="6" />

Here we state a min value (I assumed 20 for the purposes of the example) a max value (same again) and a step - which is how much each increment can be.

Modern browsers will validate this, display appropriate messages and highlight fields to be corrected.

You could optionally also add JavaScript validation...

<form id="myForm" method="get" action="http://www.random.org/integers/">

I have added an ID here to avoid infecting the form with JavaScript attributes.

var myForm = document.getElementById('myForm');
myForm.onsubmit = function () {
    // You can code your own validation...
    // return false to prevent submission
    // If everything is okay...
    return true;
};

answered Nov 1, 2013 at 11:31

Fenton

253k74 gold badges404 silver badges414 bronze badges

2 Comments

Contourette. Over a year ago

But won't this validation just redirect me to the website? Like if you add a script to display an alert box, of any kind to the HTML code above, it will ignore it and redirect to the link specified in the action field of the form. How do you get past that and make the code display the alert and not ignore and redirect?

Fenton Over a year ago

The HTML validation prevents the form from posting - so you have to correct the errors before you could proceed. The same goes for the JavaScript validation - when you return false; from the onsubmit event it will prevent the form submission. Here is an example of both techniques: jsfiddle.net/8X2wy

Collectives™ on Stack Overflow

HTML Field Form validation with JavaScript

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related