How do you make a form field required? Like, *really* required?

[fuzzybabybunny]

I'm currently using this method:

<input class="whatever" size="50" name="date" type="text" id="date" value="" required />

I still get tons and tons of submissions with this field blank! How do I make this form field *necessary* ie. it refuses to submit and gives you a big-ass error message saying you have to fill in this field.

It needs to work on all devices, all browsers. So sick of dealing with incomplete orders.

 

[code65536]

This can only be reliably enforced server-side. Period.

You could try to use JavaScript, but then the user can just disable JavaScript and bypass. You could then remove the form submission button and replace it with a JS-invoked submit so that it's impossible to submit the form if JS is disabled, but a sufficiently resourceful user can get around that, too. Server-side enforcement is the only completely foolproof solution.

 

[DaveSimmons]

How many of the submissions are by bots? Bots don't load your form into a browser and run the script code, they just scrape it and do a POST or GET on their own. Like code65536 says that can only be stopped on the server side.

 

[fuzzybabybunny]

That's fine. I've got PHP running. What do you recommend I do with server-side PHP code?

All of the incomplete submissions are by actual customers. They're just not very detail-oriented people. The form is there to schedule an appointment, and they often forget to put in the date and time they want to schedule for...

 

[TechBoyJK]

Before your script attempts to do anything meaningful with the data, write a script that cycles through the posted variables and checks them for what you want.

If everything is ok, then send it to be processed. If not, kick back an error and don't process what was submitted.

 

[IHateMyJob2004]

What technologies are you using besides PHP? Using any libraries like YUI?

 

[fuzzybabybunny]

What technologies are you using besides PHP? Using any libraries like YUI?

Just PHP at the moment 🙁

Is that bad?

 

[Leros]

The client-side javascript should at least do a quick attempt at validation. This is so that the user gets feedback for common problems without having wait for a response from the server. The server then needs to do full validation and be capable of rendering the form again with validation errors.

I've personally written code that keeps my server-side and client-side validation rules in sync. It was a pain to write, but helps maintenance down the road.

 

[TridenT]

I'm currently using this method:

<input class="whatever" size="50" name="date" type="text" id="date" value="" required />

I still get tons and tons of submissions with this field blank! How do I make this form field *necessary* ie. it refuses to submit and gives you a big-ass error message saying you have to fill in this field.

It needs to work on all devices, all browsers. So sick of dealing with incomplete orders.

There's a few ways to do it. I don't know many ways. I was thinking,

?>
<FORM ACTION="customer.form.logic.php" METHOD="POST">
<input  class="whatever" size="50" name="date" type="text" id="date" value="[B]<?=$_POST['date']?>[/B]" required /><?= $_POST['FILL_DATE'] ? "<div class="JESUSCHRISTSUPERSTAR">FILL THIS SUCKAH OUT YO</div>" : "" ?>

</FORM>
<?

And then when you go to customer.form.logic.php and do a

 if(empty($_POST['date'])){
header("Location: customer.form.php?FILL_DATE=1&ANYOTHERPERTIENTINFORMATIONTOFILL=105&OTHERVARIABLES=JOHN&LAST=SMITHY");
}

That's a terrible way, but I'm not a PHP guru. I am not sure how to send data via POST with header location redirects.

 

[Ichinisan]

I did something like this. I'm not professionally trained and didn't know what PHP really was, but I saw bits of PHP code in my employer's site and kinda figured out what it was. A lot of Google-fu and brute force...and I was able to make a contact form that doesn't reveal email addresses to the user and has fields that are absolutely required (and validated).

I could probably dig up the code if it would save you some time.

 

[beginner99]

As already explained:

- do basic validation client-side with JS. IMHO 99% of people have it enabled

- do full validation server side.


For client side validation use pure JS or JQuery (or similar tool) to display a error message next to the erroneous field.

For server side validation I use the Session variable to return data to the form but you could also use GET or POST. I will use POST in this example.

I prefer the paradigm that the form posts to a separate PHP file that is for processing only with not display logic. This processing file does the validation. In case it finds errors it will put them into an array with field name = > validation error message. This array is then added to

$_POST["validation"]

and the submitted form values are also added to $_POST again.

On the form which must also be a PHP file you have for each input field:

<form class="cssform" action="processData.php" method="post">
	<div>
		<label for="myField">My Field</label>
		<input type="text" id="myField" name="myField"
			value="<?php echo !empty($_POST['myField']) ? $_POST['myField'] : ''; ?>"/>
		<?php		
			if (isset($_POST["validation"]['myField'])) {
				echo "<span class='error'>{$_POST["validation"]['myField']}</span>";
			}
		?>
	</div>
</form>

To make this display correctly you need some CSS. See end of this post.

So basically when the form is loaded it will automatically display the initially submitted values again so user does not have to retype everything and it will show an error message next to the input causing the issue.

Example:

.cssform {
    padding-top: 2em;
    padding-bottom: 2em;
}

.cssform div {
    max-width: 680px;
    clear: left;
    margin: 0;
    padding: 5px 0 8px 0;
    padding-left: 155px; /*width of left column containing the label elements*/
}

.cssform label {
    color: #990033;
    font-weight: bold;
    float: left;
    margin-left: -155px; /*width of left column*/
    width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}


.cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
    width: 180px;
    padding-bottom: 5px
}

.error {
   /* obviously you don't have the image but search one or leave it away */
    background: #fff3f3 url(../images/skin/exclamation.png) 4px 50% no-repeat;
    border: 1px solid red;
    color: #cc0000;
    padding: 5px 5px 5px 30px;
    margin-top: 0px;
    margin-left: 15px;
}