CODEWITHSUNDEEP
javascriptformsvalidation
user3294542
user3294542

Reputation: 11

Javascript wont validate form

Currently I have a form that has 3 text inputs. When the "submit" button is pressed it calls a javascript function that validates the form and then submits the form. The problem is that the form is still being submitted without valid inputs. If anyone could tell me why this is happening it would be greatly appreciated.

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Goal Input</title>
    <link href="AgileGoals.css" rel="stylesheet">
    <script type="text/javascript">
        function addSubGoal(){
            var table = document.getElementById("goalInput");
            var row = table.insertRow(table.rows.length);
            row.insertCell(0).innerHTML = "Subgoal:";
            row.insertCell(1).innerHTML = "<input type='text' name='subgoal'>";
        }
        function submit(){
            var goodInput = true;
            var name = document.getElementById("goalName").value;
            var length = document.getElementById("goalLength").value;
            if(name==""){
                goodInput=false;
                document.getElementById("nameError").innerHTML = "<em>Must enter a name.</em>";
            }
            if(length==""){
                goodInput=false;
                document.getElementById("lengthError").innerHTML = "<em>Must enter a length</em>";
            }else if(isNaN(length)){
                 goodInput=false;
                 document.getElementById("lengthError").innerHTML = "<em>Must be a number</em>";
            }            
            else if(length%1!=0){
                goodInput=false;
                document.getElementById("lengthError").innerHTML = "<em>Must be an integer</em>";
            }
            if(goodInput){
                document.getElementById("goalFoarm").submit();
            }
        };
    </script>
</head>
<body>
<form id="goalForm" action="server" method="post">
    <table id="goalInput">
        <tr>
            <td>Goal Name:</td>
            <td><input type="text" name="goalName" id="goalName"></td>
            <td id="nameError"></td>
        </tr>
        <tr>
            <td>Goal Length(Months):</td>
            <td><input type="text" name="goalLength" id="goalLength"></td>
            <td id="lengthError"></td>
        </tr>
        <tr>
            <td>Subgoal:</td>
            <td><input type="text" name="subgoal"></td>
        </tr>
    </table>
    <input type="button" onclick="addSubGoal()" value="Add Subgoal">
    <input type="button" onclick="submit()" value="Submit">
</form>

</body>
</html>

Upvotes: 0

Views: 62

Answers (3)

lshettyl
lshettyl

Reputation: 8171

Sometimes, browsers don't like function names like submit as it's a reserved keyword/function. So, try the following.

function submitForm() {
    var goodInput = true;
    //Store references to DOM elements.
    var errorName = document.getElementById("nameError");
    var errorLength = document.getElementById("lengthError");
    var name = document.getElementById("goalName").value;
    var length = document.getElementById("goalLength").value;
    
    //Empty the previous error messages when valid options are entered.
    errorName.innerHTML = "";
    errorLength.innerHTML = ""
    
    if(name == "") {
        errorName.innerHTML = "<em>Must enter a name.</em>";
        goodInput = false;
    }
    //Check if it's a number and not empty.
    if(length.match(/^\d+$/i) === null){
        errorLength.innerHTML = "<em>Must enter a length that's a number!</em>";
        goodInput = false;
    }
    if(!goodInput) {
        return false;
    } else {
        alert ("All clear!");
    }
}
<form id="goalForm" method="post">
    <table id="goalInput">
        <tr>
            <td>Goal Name:</td>
            <td><input type="text" name="goalName" id="goalName"></td>
            <td id="nameError"></td>
        </tr>
        <tr>
            <td>Goal Length(Months):</td>
            <td><input type="text" name="goalLength" id="goalLength"></td>
            <td id="lengthError"></td>
        </tr>
        <tr>
            <td>Subgoal:</td>
            <td><input type="text" name="subgoal"></td>
        </tr>
    </table>
    <input type="button" onclick="addSubGoal()" value="Add Subgoal">
    <input type="button" onclick="submitForm()" value="Submit">
</form>

Upvotes: 0

Ricardo Pontual
Ricardo Pontual

Reputation: 3757

I think you just missing call the preventEvent in your validation function.

First, alter the declaration of your submit button to this:

<input type="button" onclick="return submit()" value="Submit">

Secount, modify the signature of you validation function to this:

function submit(e){

Third, if validation fails, just execute this line:

e.preventDefault(); return false;

This will prevent the form to be submitted with errors. Hope it helps.

Upvotes: 1

candlejack
candlejack

Reputation: 1209

Here, a jQuery solution.

$('#goalForm').submit(function(event){
    // your validation here, if ok, submit manually.
    event.preventDefault(); // This line prevent the submit action.
});

Upvotes: 0

Related Questions