Javascript to validate element values and checkboxes

Question

I want to use js to check a form in the case that none of my checkboxes are checked and the input field hasn't been filled. When this is the case, the user should get a message that tells them to make at least one choice or formulate their own.

The form elements...

<input type="checkbox" name="checkboxA" id="checkboxA" value="X" />
<input type="checkbox" name="checkboxB" id="checkboxB" value="Y" />
<input type="checkbox" name="checkboxC" id="checkboxC" value="Z" />

<input type="text" id="Text" class="textfield" value="please enter text." maxlength="100" size="40" onblur="if (this.value == '') {this.value = 'please enter text';}"  onfocus="if (this.value == 'please enter text') {this.value = '';}" />

...are checked by this js function when the POST method is performed:

function checkFormElement() {
if ((document.getElementById("text").value == "please enter text.")
    && (document.getElementById("checkboxA").checked == false)
    && (document.getElementById("checkboxB").checked == false)
    && (document.getElementById("checkboxC").checked == false)){
        alert("Please choose out of X Y Z or formulate your own choice .");
        document.getElementById("checkboxA").focus();
    return false;
    }
return true;

}

I guess using jQuery should be much easier but I still love to know how to solve this in pure js.

So, what is your question? What are you having problems with in your code? What doesn't work? — jfriend00
– jfriend00, Commented Aug 21, 2012 at 20:09

jfriend00 · Accepted Answer · 2012-08-21 20:35:49Z

3

Case matters with ID values so change this:

document.getElementById("text").value

to this to match what you have in your HTML:

document.getElementById("Text").value

Once I fix the case issue and put in code to actually call checkFormElement(), it seems to work fine here: http://jsfiddle.net/jfriend00/9DHxF/

edited Aug 21, 2012 at 20:35

answered Aug 21, 2012 at 20:10

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Phil Over a year ago

or change the html to "text" :)

FungyBytes Over a year ago

Problem is that it doesn't give me the alert message. Checked for typos (such as the given uppercase lowercase) but still no succes..

jfriend00 Over a year ago

@Kiwi1 - Are you calling checkFormElement() somewhere? It isn't called in the code you have in your question. When I call it and fix the case error, it works here: jsfiddle.net/jfriend00/9DHxF.

FungyBytes Over a year ago

@jfriend00: looked again at my code and found out I still had some typos here and there. should be looking out for these before hitting the forums :). Thanks anyway!

Shabab · Accepted Answer · 2012-08-21 20:16:05Z

0

You're missing a submit or similar type of button\option that will run checkFormElement(). Once you include something that calls this function, you shouldn't experience any problems.

answered Aug 21, 2012 at 20:16

Shabab

2491 silver badge9 bronze badges

Comments

Axel · Accepted Answer · 2012-08-21 20:18:56Z

0

You have a few errors in your code. Mostly mismatched IDs and such.

Working example here: http://jsfiddle.net/E8SBq/

This should work for you:

<input type="checkbox" name="checkboxA" id="checkboxA" value="X" />
<input type="checkbox" name="checkboxB" id="checkboxB" value="Y" />
<input type="checkbox" name="checkboxC" id="checkboxC" value="Z" />

<input type="text" id="Text" class="textfield" value="please enter text" maxlength="100" size="40" onblur="if (this.value == '') {this.value = 'please enter text';}"  onfocus="if (this.value == 'please enter text') {this.value = '';}" />
<input type="submit" value="Submit" onClick="checkFormElement()" />

And the JS function:

function checkFormElement() {
if (document.getElementById("Text").value != null  
    && document.getElementById("checkboxA").checked == false
    && document.getElementById("checkboxB").checked == false
    && document.getElementById("checkboxC").checked == false) {
        alert("Please choose out of X Y Z or formulate your own choice .");
        document.getElementById("checkboxA").focus();
    return false;
    }
return true;

}

answered Aug 21, 2012 at 20:18

Axel

10.8k2 gold badges32 silver badges43 bronze badges

1 Comment

Shabab Over a year ago

Please note, the onblur event of the text field prevents a null value. So you should keep Kiwi1's original code. Also in my experience, the submit button works better in a <form>. You should be able to get the same functionality with a regular button and not trigger any possible form actions.

Collectives™ on Stack Overflow

Javascript to validate element values and checkboxes

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related