CODEWITHSUNDEEP
javascriptforms
Autodesk
Autodesk

Reputation: 711

javascript validate form when fields changing every time

I have a form with fields changing every time, but javascript function don't work.

What's the problem in my javascript code?

my form is made by code below:

<form name="Form" action="" method="post" onsubmit="return validateForm()">

    <? if (/*statement*/){ ?>
        <label>city </label><input type="text" name="city" />
    <?}?>

    <? if (/*statement*/){ ?>
        <label>color </label><input type="text" name="color" />
    <?}?>

    <? if (/*statement*/){ ?>
        <label>animal </label><input type="text" name="animal" />
    <?}?>

    <button type="submit" name="submit" value="submit">submit</button>

</form>

and my javascript.js is like below

function validateForm() {

    var x = document.forms["Form"]["city"].value;
    var y = document.forms["Form"]["color"].value;
    var z = document.forms["Form"]["animal"].value;

    if (x == null || x == "") {
        alert("need city");
        return false;
    }
    if (y == null || y == "") {
        alert("need color");
        return false;
    }
    if (z == null || z == "") {
        alert("need animal");
        return false;
    }
}

Upvotes: 2

Views: 330

Answers (4)

wizcabbit
wizcabbit

Reputation: 36

You used template to generate HTML, so if the page did not show "city" means the "city" tag do not exist, and your JS code will crash in "var x" line, because document.forms["Form"]["city"] is UNDEFINED.

I suggest you modify your JS code like this:

function validateForm() {
    var x = document.forms["Form"]["city"];
    var y = document.forms["Form"]["color"];
    var z = document.forms["Form"]["animal"];

    if (x != undefined && x == "") {
        alert("need city");
        return false;
    }
    if (y != undefined && y == "") {
        alert("need color");
        return false;
    }
    if (z != undefined && z == "") {
        alert("need animal");
        return false;
    }
}

The field will be undefined, if you do not output it.

Upvotes: 0

Dev-an
Dev-an

Reputation: 462

A simple fix is to check if the element exists before trying to access its value. Try the following:

function validateForm() {
    var x = document.forms["Form"]["city"];
    var y = document.forms["Form"]["color"];
    var z = document.forms["Form"]["animal"];

    if (x != null && x.value == "") {
        alert("need city");
        return false;
    }
    if (y != null && y.value == "") {
        alert("need color");
        return false;
    }
    if (z != null && z.value == "") {
        alert("need animal");
        return false;
    }

    return true; // if everything is valid
}

Upvotes: 1

Venkat
Venkat

Reputation: 263

You have to check input's element is defined before you assigning the value in javascript, since its dynamically printing. For example 

document.forms["Form"]["city"].value

In javascript, you have to use below code to check its defined 

if(document.forms["Form"]["test"] !== undefined)
 alert(document.forms["Form"]["city"].value)

Or use jQuery code that was added by Atul

Upvotes: 0

Atul Nar
Atul Nar

Reputation: 695

since your fields generated dynamically you can not access element such as <input type="text" name="city" /> if its not there so in general you need to go through all textboxes inside form.please see code below

    function validateForm() {
        alert("here");
        $('#Form input[type="text"]').each(function(){
        //your code here
        var data=""+$(this).val();
        if(data=="")
        {
            var name=$(this).attr("name");
            alert("Please Enter "+name);
        }

        });
    }

Upvotes: 1

Related Questions