CODEWITHSUNDEEP
javascripthtmlformsvalidation
Contourette.
Contourette.

Reputation: 35

HTML Field Form validation with JavaScript

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?

Upvotes: 1

Views: 907

Answers (2)

Vinod Louis
Vinod Louis

Reputation: 4876

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();

}

Upvotes: 1

Fenton
Fenton

Reputation: 250922

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;
};

Upvotes: 0

Related Questions