I need to validate this form

Question

I want to validate this form. in which first field obtained marks which should not be more than 1100 or less then 1 and in second field total marks should be 1100.. in third and fourth field will be same like previous two fields but with different ID and the last field marks should not be greater than 200 or less than 1.. and form should not proceed unless input is completely correct

function myFunction() {
var x, text, y, z;

// Get the value of the input field with id="numb"
x = document.getElementById("mfsc").value;
y = document.getElementById("matric").value;
z = document.getElementById("per").value;

// If x is Not a Number or less than one or greater than 10
if (isNaN(x) || x < 0 || x > 1100) {
    alert("marks should be less then 1100");
} 
if (isNaN(y) || y < 0 || y > 1100) {
    alert("Matric Marks should be less then 1100");
} 
if (isNaN(z) || z < 0 || z > 200) {
    alert("NET Marks should not be more then 200");
}

}

<form action="merit-nust.php" method="Post" name="Form1" onsubmit="return validateForm()">
                  <div class="style1"> Enter Your marks in FSc</div>
                  <div align="left">
                    <input type="text" required style="width: 160px; float: left; margin-right: 1%;" size="20" placeholder="Obtained Marks in FSc Part-I" id="mfsc" class="TextBox form-control">
                    <input type="text" required class="TextBox form-control" placeholder="Total Marks in FSc Part-I"  name="totalfsc" size="20" style="width: 160px; float: left; margin-right: 1%;">
                  </div>
                  <div align="left">
                    <input type="text" required style="width: 160px; float: left; margin-right: 1%;" size="20" placeholder="Obtained Marks in Matic" id="matric" name="matric" class="TextBox form-control">
                    <input type="text" required class="TextBox form-control" placeholder="Total Marks in Matric" name="totalmatric" size="20" style="width: 160px">
                  </div>
                  <div class="style1">NET Marks (out of 200)</div>
                  <label for="1">
                    <input type="text" required style="width: 160px" size="20" id="per" class="TextBox form-control">
                    <br>
                  </label>
                  <center>
                    <input type="submit" onClick="myFunction()" name="submit" value="Find Colleges" id="INPUT_27">
                  </center>
                </form>

Could you show us how you tried to solve this problem? You have only given us some HTML. Where do you struggle? — domyos, Jun 30 '16 at 09:59
@domyos http://www.eduvision.edu.pk/merit/nust-merit-calculator.php what is the link i need to create proper validation for it can you make it for me ? — Arsalan Ehsan, Jun 30 '16 at 10:38
@ArsalanEhsan If an user answered your question please also **accept** his answer ([Accepting Answers: How does it work?](https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work)). If not than please specify what remains unanswered, this is a really crucial part of StackOverflow, thank you very much. — Zabuzard, Jul 27 '17 at 12:29

score 0 · Answer 1 · edited May 23 '17 at 12:14

First of all, I'm not sure if I understood your problem. The HTML seems fine, so does your function. The link that you've provided showcases the scenario, the alerts get thrown correctly.
Am I correct that you now want the function to not submit the form if it is not valid?

A form gets not submitted if onsubmit returns false. Your snippet already contains onsubmit="return validateForm()". You simply need the function to return false if the form is not valid. Here is a related question: want-html-form-submit-to-do-nothing.

Let's keep it simple, we introduce a boolean isValid, set it correctly and then return it. Let's also show an alert if the form gets not submitted.

function validateForm() {
    var x, text, y, z;
    var isValid = true;

    // Get the value of the input field with id="numb"
    x = document.getElementById("mfsc").value;
    y = document.getElementById("matric").value;
    z = document.getElementById("per").value;

    // If x is Not a Number or less than one or greater than 10
    if (isNaN(x) || x < 0 || x > 1100) {
        alert("marks should be less then 1100");
        isValid = false;
    } 
    if (isNaN(y) || y < 0 || y > 1100) {
        alert("Matric Marks should be less then 1100");
        isValid = false;
    } 
    if (isNaN(z) || z < 0 || z > 200) {
        alert("NET Marks should not be more then 200");
        isValid = false;
    }

    if (!isValid) {
        alert("Form gets not submitted, it is not valid!");
    }

    return isValid;
}

Thanks you for your help sir @Zabuza – Arsalan Ehsan Jul 01 '16 at 07:57 — Arsalan Ehsan, Jul 01 '16 at 07:57

I need to validate this form

1 Answers1