Basic HTML 5 Form "Required" Validation Not Working!

  • (2 Pages)
  • +
  • 1
  • 2

24 Replies - 713 Views - Last Post: 03 March 2013 - 04:38 PM

#16 bateman  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 23
  • Joined: 01-February 13

Re: Basic HTML 5 Form "Required" Validation Not Working!

Posted 03 March 2013 - 12:40 PM

View Postandrewsw, on 03 March 2013 - 12:12 PM, said:

Saying "Still not working" is not helpful to yourself or anyone else here at DIC.

input type='checkbox' name='$code'>

..is the PHP correctly embedded in this code? See my previous post.

What errors does your Console show?
If you view the source for the page is it correctly formed?

Your code line above does not give the checkbox a value. It is not as useful without a value and, without setting this value (even to "") it may be 'undefined' rather than null or "".

You should be checking the .checked property of a checkbox to see if the user has selected it.


Apologies for that - its been a long day. Ive managed to solve the issue using the .checked function you mentioned. Thanks for your help
Was This Post Helpful? 0
  • +
  • -

#17 andrewsw  Icon User is offline

  • Provides a RESTful service
  • member icon

Reputation: 1082
  • View blog
  • Posts: 3,370
  • Joined: 12-December 12

Re: Basic HTML 5 Form "Required" Validation Not Working!

Posted 03 March 2013 - 12:51 PM

No worries. I'll post the following page anyway if useful, as I spent 20 minutes on it :sweatdrop:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <style type="text/css">
        /* */
    </style>
    <script type="text/javascript">
        function validateForm(frm) {
            var checks = document.getElementsByName("youchoose[]");
            var chosen = false;
            for (var i=0; i < checks.length; i++) {
                if (checks[i].checked) {
                    alert("You have checked " + checks[i].value);
                    chosen = true;
                }
            }
            if (chosen === false) {
                alert("You haven't chosen a fruit.");
                event.preventDefault();
                // return false; on its own is not sufficient
                return false;
            }
            return true;
        }
    </script>
</head>

<body>
<form id="frm" action="some.php" method="post" onsubmit="validateForm(this);">
    <label for="yc1">Apples</label>
    <input type="checkbox" id="yc1" name="youchoose[]" value="apples">
    <label for="yc2">Pears</label>
    <input type="checkbox" id="yc2" name="youchoose[]" value="pears">
    <label for="yc3">Bananas</label>
    <input type="checkbox" id="yc3" name="youchoose[]" value="bananas">
    <input type="submit" value="Go!">
</form>


</body>
</html>

The square-brackets after 'youchoose' are not essential (particularly within HTML/JS) but they mean that the submitted checkbox-data will be passed to PHP as an array.
Was This Post Helpful? 0
  • +
  • -

#18 bateman  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 23
  • Joined: 01-February 13

Re: Basic HTML 5 Form "Required" Validation Not Working!

Posted 03 March 2013 - 12:53 PM

View Postandrewsw, on 03 March 2013 - 12:19 PM, said:

Your alert message is puzzling:

alert("You must choose an item");

A checkbox is a single form element, and it is either checked or not checked.

If you intend that they should check at least one of the checkboxes, then you might give them the same name and use this name to loop through all these checkboxes, checking their .checked property.

If you have already given your checkboxes the same name then your current code will not work (and there is possibly be an error in your Console) because there is more than one element of the name $code.


I thought i had it working without proper testing. At the moment it checks whether a checkbox has been selected and if one hasnt then it says you need to select one. But if you do select one it still says you haven't selected one. Heres what i got:

<form name="validate" action="page2.php" onsubmit="return checkBoxes(this);" method="post">
....
<input type='checkbox' name='$code' value='null'>
function checkBoxes(form) {
	if (
	form.<?php echo $code; ?>.checked == false) 
	{
		alert ('You didn\'t select anything!');
		return false;
	} else { 	
		return true;
	}
}


Do you know why it isn't returning true if a box is selected?

Thanks,
Was This Post Helpful? 0
  • +
  • -

#19 andrewsw  Icon User is offline

  • Provides a RESTful service
  • member icon

Reputation: 1082
  • View blog
  • Posts: 3,370
  • Joined: 12-December 12

Re: Basic HTML 5 Form "Required" Validation Not Working!

Posted 03 March 2013 - 12:57 PM

You've used an ellipsis '...' - does this indicate that you have several checkboxes of the same name? If so, then study the code in my previous post.

You should also, as I have mentioned, use your browser's console - to check for errors and test things. There are relevant links in my signature.
Was This Post Helpful? 0
  • +
  • -

#20 bateman  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 23
  • Joined: 01-February 13

Re: Basic HTML 5 Form "Required" Validation Not Working!

Posted 03 March 2013 - 02:08 PM

View Postandrewsw, on 03 March 2013 - 12:57 PM, said:

You've used an ellipsis '...' - does this indicate that you have several checkboxes of the same name? If so, then study the code in my previous post.

You should also, as I have mentioned, use your browser's console - to check for errors and test things. There are relevant links in my signature.


The checkboxes are generated from a list in a text file. There is only 1 variable name for the checkboxes $code. The ... is just the PHP used to access the file etc.
Was This Post Helpful? 0
  • +
  • -

#21 andrewsw  Icon User is offline

  • Provides a RESTful service
  • member icon

Reputation: 1082
  • View blog
  • Posts: 3,370
  • Joined: 12-December 12

Re: Basic HTML 5 Form "Required" Validation Not Working!

Posted 03 March 2013 - 02:31 PM

Quote

There is only 1 variable name for the checkboxes $code.

..so you have several checkboxes with the same name? (which I have hinted at over my last few posts :whistling:).

Then examine the code from my post #17.
Was This Post Helpful? 0
  • +
  • -

#22 bateman  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 23
  • Joined: 01-February 13

Re: Basic HTML 5 Form "Required" Validation Not Working!

Posted 03 March 2013 - 02:46 PM

View Postandrewsw, on 03 March 2013 - 02:31 PM, said:

Quote

There is only 1 variable name for the checkboxes $code.

..so you have several checkboxes with the same name? (which I have hinted at over my last few posts :whistling:/>/>/>).

Then examine the code from my post #17.


Thanks for the effort you put into post #17. I have not 'hard coded' the checkbox items in HTML or PHP. I am using PHP to read in the items from a file and output them to a table and use checkboxes to select the item. The only reference to a checkbox is this 
<input type='checkbox' name='$code'>
I did set the value as NULL like you suggested but it had no effect on the situation.

Was This Post Helpful? 0
  • +
  • -

#23 andrewsw  Icon User is offline

  • Provides a RESTful service
  • member icon

Reputation: 1082
  • View blog
  • Posts: 3,370
  • Joined: 12-December 12

Re: Basic HTML 5 Form "Required" Validation Not Working!

Posted 03 March 2013 - 03:57 PM

Quote

I did set the value as NULL like you suggested but it had no effect on the situation.

I don't recall suggesting NULL as a suitable value for a checkbox.. but never mind :)

As discussed previously, you can embed the PHP variable $code into JS in the same way that you do with the HTML.

Alternatively, you can give all the check-boxes a (fixed/known) class-name. Or you can get all the input elements of the form:

frmReference.getElementsByTagName('input')

and loop through these checking whether their .type == "checkbox".

This post has been edited by andrewsw: 03 March 2013 - 03:57 PM

Was This Post Helpful? 0
  • +
  • -

#24 bateman  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 23
  • Joined: 01-February 13

Re: Basic HTML 5 Form "Required" Validation Not Working!

Posted 03 March 2013 - 04:28 PM

View Postandrewsw, on 03 March 2013 - 03:57 PM, said:

Quote

I did set the value as NULL like you suggested but it had no effect on the situation.

I don't recall suggesting NULL as a suitable value for a checkbox.. but never mind :)/>/>

As discussed previously, you can embed the PHP variable $code into JS in the same way that you do with the HTML.

Alternatively, you can give all the check-boxes a (fixed/known) class-name. Or you can get all the input elements of the form:

frmReference.getElementsByTagName('input')

and loop through these checking whether their .type == "checkbox".


I have embedded the PHP variable <?php echo $code; ?> in the JS 
<input type='checkbox' name='$code' value='null'>
function checkBoxes(form) {
	if (
	form.<?php echo $code; ?>.checked == false) 
	{
		alert ('You didn\'t select anything!');
		return false;
	} else { 	
		return true;
	}
}


This is the stage i am at where it isnt recognising when a checkbox is checked.
Was This Post Helpful? 0
  • +
  • -

#25 andrewsw  Icon User is offline

  • Provides a RESTful service
  • member icon

Reputation: 1082
  • View blog
  • Posts: 3,370
  • Joined: 12-December 12

Re: Basic HTML 5 Form "Required" Validation Not Working!

Posted 03 March 2013 - 04:38 PM

Yes.. but if you have more than one checkbox of the same name then this line:

if (form.<?php echo $code; ?>.checked == false) {

won't work (if $code is the name of these checkboxes).

..and what is a typical value for $code? If it contains spaces, or other odd characters, then it won't work either.
Was This Post Helpful? 0
  • +
  • -
  • (2 Pages)
  • +
  • 1
  • 2