[bateman]

Hi guys, i am fairly new to web programming so please go easy on me if it is a blatant mistake. I would like to add the HTML 5 required feature to a form on a page which asks for a customer's name. I have added 'required' but it does nothing. Here is the relevant code on the page:

 <form action="page2.php" method="post">

    <p> Please enter your customer name: <input type="text" name="customer_name" required> </p> 
......
<input type="submit" value="Submit"><input type="reset" value="Reset">
</form>

I appreciate your help guys.

[andrewsw]

Depends on your browser: caniuse

[bateman]

Thanks, i was using Safari but have just tested in Chrome and it works there! Is there anything i can do to improve compatibility or is the limitation when using HTML 5 validation?

This post has been edited by Dormilich: 03 March 2013 - 10:55 AM
Reason for edit:: removed quote

[andrewsw]

You can use Javascript to reproduce the behaviour of REQUIRED for those browsers that don't support it. But, of course, you should not rely on this validation, relying on server-side validation.

There is probably a JS library or module somewhere that you could use if you didn't want to create the JS yourself.

[bateman]

Thanks, i have another problem now with the same page. At the moment a user can enter the name and submit an order without selecting items using the checkboxes. I changed the final submit to have the required feature hoping that this would require an item to be selected but this does not work. I am using PHP to populate a table with items from a file that can be selected with checkboxes. Any ideas?

<input type="submit" value="Submit" required="required"><input type="reset" value="Reset">

This post has been edited by Dormilich: 03 March 2013 - 10:56 AM
Reason for edit:: removed unnecessary quote

[andrewsw]

The REQUIRED attribute is not relevant to the submit button. You can't really use it with individual checkboxes either; it wouldn't make sense, as they would always have to check them(?).

With Javascript you would add an onsubmit event/attribute to the form itself. In this event-handler you would check the values of the various form-controls, and return false; if they haven't completed the form correctly. return false; prevents the form from being submitted.

But if you are not familiar with JS then you'll need to do some research and studying.

[bateman]

I have come up with this but it doesn't do anything - do you know why?

<form name="validate" action="page2.php" onsubmit="return validateForm()" method="post">
....
....
<input type="submit" name="submit" value="Submit"><input type="reset" value="Reset">

  <script  type="text/javascript">

  function validateForm()
{
var x=document.forms["validate"]["submit"].value;
if (x==null || x=="")
  {
  alert("You must select an item");
  return false;
  }
}
  </script>
</form>

This post has been edited by Dormilich: 03 March 2013 - 10:56 AM
Reason for edit:: removed unnecessary quote

[andrewsw]

Why are you attempting to read the value of the submit button? It will always be the value "Submit" (unless you write some strange code to change this value) and the value itself is of very limited use to Javascript.

The basic structure of your page, and script, is okay though. So your validateForm() function should be checking the values of other form elements - the checkboxes you mentioned (their .checked property), etc..

[bateman]

I have this code for the check boxes:

<input type='checkbox' name='$num'>

How can i put the $num in the validateform function incase i forgot to mention i am using both PHP and HTML 5.

Thanks

This post has been edited by Dormilich: 03 March 2013 - 10:56 AM
Reason for edit:: removed unnecessary quote

[andrewsw]

You can embed $num in your JS in the same way that you do for the HTML. However, with JS it is generally better/preferred to work with IDs rather than names, although you can do either.

[bateman]

andrewsw, on 03 March 2013 - 10:41 AM, said:

You can embed $num in your JS in the same way that you do for the HTML. However, with JS it is generally better/preferred to work with IDs rather than names, although you can do either.

function validateForm()
{
var x=document.forms["validate"]["$code"].value;
if (x==null || x=="")
  {
  alert("You must choose an item");
  return false;
  }
}

Does not work - still doing nothing.

[andrewsw]

You do not embed PHP into JS like that. You would need:

var x=document.forms["validate"]["<?php echo $code; ?>"].value;

This assumes that:

Quote

$code has a value,
this value is the name of one of your form elements,
that form element has a value attribute,
the value of that attribute is either null or "" (in order to produce your message).

This post has been edited by andrewsw: 03 March 2013 - 11:37 AM

[bateman]

andrewsw, on 03 March 2013 - 11:36 AM, said:

You do not embed PHP into JS like that. You would need:

var x=document.forms["validate"]["<?php echo $code; ?>"].value;

This assumes that:

Quote

$code has a value,
this value is the name of one of your form elements,
that form element has a value attribute,
the value of that attribute is either null or "" (in order to produce your message).

Still not working, the $code was the $num (i just renamed it) - its a checkbox field.

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

Surely you can you this javascript to make sure a checkbox has been selected?

[andrewsw]

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.

[andrewsw]

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.

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