I want to verify in JavaScript that my required fields are not blank

Question

Hopefully this is basic JavaScript and the answer is easy since I am new at this. I just want to make sure all required fields are not blank before the user can proceed. In my <form> action = payment.php and the submit button contains onclick="insert();" When child_name is left blank, it just proceeds to the next page rather than alerting. Here is the code:

    <script type="text/javascript">
    function insert() {
        if (window.XMLHttpRequest) {
            xmlhttp = new XLMHttpRequest();
        } else {
            xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
        }



        cn1 = 'child_name'+document.getElementById('child_name').value;
        ag2 = 'age'+document.getElementById('age').value;
        hm3 = 'hometown'+document.getElementById('hometown').value;
        bg4 = 'boy_girl'+document.getElementById('boy_girl').value;
        fn5 = 'first_name'+document.getElementById('first_name').value;
        ln6 = 'last_name'+document.getElementById('last_name').value;
        email = 'email'+document.getElementById('email').value;
        ad8 = 'address1'+document.getElementById('address1').value;
        ad9 = 'address2'+document.getElementById('address2').value;
        ct10 = 'city'+document.getElementById('city').value;
        st11 = 'state'+document.getElementById('state').value;
        zp12 = 'zip'+document.getElementById('zip').value;

        if (cn1.equals("")) {


        xmlhttp.open('POST', 'payment.php', true);
        xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        xmlhttp.send(cn1&ag2&hm3&bg4&fn5&ln6&email$ad8&ad9&ct10&st11&zp12); 
        } else {
        alert ("Please enter all required fields.");
        }
    }
</script>

What I understood is, you want us to correct your code, right? — Muthu Kumaran, Oct 19 '12 at 13:57
The binary `&` operator does not concatenate strings. Also, you forgot the `=`s and to `encodeURIComponent` your values. — Bergi, Oct 19 '12 at 13:57
Where's the code that calls this function? What does that look like? — Matt Burland, Oct 19 '12 at 17:20

score 2 · Answer 1 · answered Oct 19 '12 at 13:58

2

There are a couple issues here:

cn1 = 'child_name'+document.getElementById('child_name').value;

In this case you are assigning cn1 to the String 'child_name' + the value of your child_name textbox... it will never equal an empty String.

Secondly, you'll want your insert() method to return false on error in order to stop the button's intended action.

answered Oct 19 '12 at 13:58

achan

551
2
11

"you'll want your insert() method to return false on error" -- Not sure what you mean by that. – CTViking Oct 19 '12 at 14:34
As Jim explains [here](http://stackoverflow.com/a/128966/567090), returning false for an onclick will tell the browser that the default behavior (submitting the form, in your case) should not take place. – achan Oct 19 '12 at 20:31

st3inn · Answer 2 · 2012-10-19T14:53:19.370

Try changing the function to this: (NOTE: you have to add more tests to the if clause for the rest of the elements)

function insert() {
    if (window.XMLHttpRequest) {
        xmlhttp = new XLMHttpRequest();
    } else {
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
    }


    if (document.getElementById('child_name').value === '' ||
        document.getElementById('age').value === '' || 
        ...more tests... || 
        document.getElementById('zip').value === '') {
        alert ("Please enter all required fields.");
        return false;
    } else {
        cn1 = 'child_name'+document.getElementById('child_name').value;
        ag2 = 'age'+document.getElementById('age').value;
        hm3 = 'hometown'+document.getElementById('hometown').value;
        bg4 = 'boy_girl'+document.getElementById('boy_girl').value;
        fn5 = 'first_name'+document.getElementById('first_name').value;
        ln6 = 'last_name'+document.getElementById('last_name').value;
        email = 'email'+document.getElementById('email').value;
        ad8 = 'address1'+document.getElementById('address1').value;
        ad9 = 'address2'+document.getElementById('address2').value;
        ct10 = 'city'+document.getElementById('city').value;
        st11 = 'state'+document.getElementById('state').value;
        zp12 = 'zip'+document.getElementById('zip').value;

        xmlhttp.open('POST', 'payment.php', true);
        xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        xmlhttp.send(cn1&ag2&hm3&bg4&fn5&ln6&email$ad8&ad9&ct10&st11&zp12); 
    }
}

Doesn't work. Still proceeds to the next page even with blank fields. — CTViking, Oct 19 '12 at 14:19

sksallaj · Answer 3 · 2012-10-22T18:08:12.533

If I were you, I'd give each one of those elements a common name or a class.

For example:

<input id="child_name" class="not_blank" type="text">
<input id="age" class="not_blank" type="text">
<input id="hometown" class="not_blank" type="text">

Since you are tying all those elements as a group by class.

Then your javascript would be a lot easier:

var flagInvalid = false;
var tempArray = document.getElementsByClassName("not_blank");
for (var i = 0; i < tempArray.length; i++)
{
    if (tempArray[i].value == "" || tempArray[i].value === undefined || tempArray[i].value == null){
        flagInvalid = true;
        break; 
    }
}

if (flagInvalid == false){
    xmlhttp.open('POST', 'payment.php', true);
    xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xmlhttp.send(cn1&ag2&hm3&bg4&fn5&ln6&email$ad8&ad9&ct10&st11&zp12); 

} else { alert ("Please enter all required fields."); }

Btw, I strongly advise not to use "alert". Try to create a messaging system on the document itself. Like:

<span id="log" class="hidden" style="color:red"><b>"Please enter all required fields." <b></span>

Your css would look like this:

.hidden { display: none; }
.show { display: inline; }

Your javascript would be changed to:

if (flagInvalid == false){
    var log = document.getElementById("log");
    log.className = 'hidden';
    xmlhttp.open('POST', 'payment.php', true);
    xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xmlhttp.send(cn1&ag2&hm3&bg4&fn5&ln6&email$ad8&ad9&ct10&st11&zp12); 

} else { 
    var log = document.getElementById("log");
    log.className = 'show';
}

Doesn't work. It still proceeds to the next page, even when the required fields are left blank. — CTViking, Oct 19 '12 at 14:33
You'd have to diagnose what value is being passed into tempArray[i].value. If it is not equal to "" then you might have to see if it is undefined or if it is null. I just updated the code above. — sksallaj, Oct 22 '12 at 18:06

I want to verify in JavaScript that my required fields are not blank

3 Answers3

Linked

Related