Making form fields mandatory

[laflair13]

Hey All, I have a form that I need 2 inputs to be mandatory before the mail gets sent. (the name and email)

Here is the form code.

<form id="FormTB" action="">
<input type="hidden" id="Form_ID" name="Form_ID"  value="<?php echo $eid; ?>" />
<center><strong>Request a Quote</strong></center><br />
<table width="100%">
<tr>
<td width="30%">*Your Name:</td><td width="20%">&nbsp;</td><td width="50%"><input type="text" id="Form_Name" name="Form_Name" /></td>
</tr>
<tr>
<td width="30%">Company Name:</td><td width="20%">&nbsp;</td><td width="50%"><input type="text" id="Form_Company" name="Form_Company" /></td>
</tr>

<tr>
<td>*Your E-Mail:</td><td>&nbsp;</td><td><input type="text" id="Form_Email" name="Form_Email" /></td>
</tr>
<tr>
<td width="30%">*Phone Number:</td><td width="20%">&nbsp;</td><td width="50%"><input type="text" id="Form_Number" name="Form_Number" /></td>
</tr>
<tr><td colspan="3">&nbsp;</td></tr>
<tr>
<td width="100%" align="center" colspan="3">
<input type="button" class="button" name="Form_Submit" value="Request Quote" />
</td>
</tr>
<tr><td colspan="3">&nbsp;</td></tr>
<tr>
<td width="100%">
<b><?php echo $name; ?></b><br />
<b>Manufacturer:</b> #<?php echo $manu;?><br />
 <b>Model#:</b> <?php echo $model;?><br />
  <b>Category:</b> <?php echo $Category;?><br />
  </td>
</tr>
</table>
</form>

And here is the JS that I am using with it.

<script language="javascript" type="text/javascript">
$(function() {  
  $(".button").click(function() {  
  var name = $("#Form_Name").val();
  var email = $("#Form_Email").val();
  var eid = $("#Form_ID").val();
   var company = $("#Form_Company").val();
    var number = $("#Form_Number").val();
    var dataString = 'name='+ name + '&email=' + email + '&eid=' + eid + '&Company=' + company + '&Number=' + number;    
//alert (dataString);return false;  
		$.ajax({  
		  type: "POST",  
		  url: "AJAX_Quote.php",
		  data: dataString,  
		  success: function() {  
			tb_remove();
			setTimeout("Thanks()", 450);
		  }  
		});   
	});  
});  
function Thanks()
{
tb_show('Thank You', '#TB_inline?width=400&height=400&inlineId=TBThanks&modal=false', false);
}
jQuery.noConflict(); 
function clearText(field){

    if (field.defaultValue == field.value) field.value = '';
    else if (field.value == '') field.value = field.defaultValue;

}
</script>

I know you have to add something like

/* validate function returns true if "ok" false if "bad" */
  validate = function(){
     /* Check if it is blank */
     if (document.getElementById('Form_Name').value = ''){
       alert('You must enter a First Name!');
       return false;
     }
     return true;

  }

But not quite sure how to do it. Can I just add that code to my existing JS or do I have to completely redo it?

Any help would be appreciated.

Thanks

[PicnicTutorials]

This is more secure done in php but here is how with JavaScript...

Simple JS
http://www.visibilityinherit.com/cod...validation.php

jQuery version
http://www.visibilityinherit.com/cod...validation.php

[laflair13]

Didnt work.

Form

<form id="FormTB" action="" onsubmit="return checkform(this);">
<input type="hidden" id="Form_ID" name="Form_ID"  value="<?php echo $eid; ?>" />
<center><strong>Request a Quote</strong></center><br />
<table width="100%">
<tr>
<td width="30%">*Your Name:</td><td width="20%">&nbsp;</td><td width="50%"><input type="text" id="Form_Name" name="Form_Name" /></td>
</tr>
<tr>
<td width="30%">Company Name:</td><td width="20%">&nbsp;</td><td width="50%"><input type="text" id="Form_Company" name="Form_Company" /></td>
</tr>

<tr>
<td>*Your E-Mail:</td><td>&nbsp;</td><td><input type="text" id="Form_Email" name="Form_Email" /></td>
</tr>
<tr>
<td width="30%">*Phone Number:</td><td width="20%">&nbsp;</td><td width="50%"><input type="text" id="Form_Number" name="Form_Number" /></td>
</tr>
<tr><td colspan="3">&nbsp;</td></tr>
<tr>
<td width="100%" align="center" colspan="3">
<input type="button" class="button" name="Form_Submit" value="Request Quote" />
</td>
</tr>
<tr><td colspan="3">&nbsp;</td></tr>
<tr>
<td width="100%">
<b><?php echo $name; ?></b><br />
<b>Manufacturer:</b> #<?php echo $manu;?><br />
 <b>Model#:</b> <?php echo $model;?><br />
  <b>Category:</b> <?php echo $Category;?><br />
  </td>
</tr>
</table>
</form>

JS

<script type="text/javascript">
<!--
function checkform ( form )
{
 // ** START **
   if (form.Form_Name.value == "") {
    alert( "Please enter your name." );
    form.Form_Name.focus();
    return false ;
  }
  if (form.Form_Email.value == "") {
    alert( "Please enter your email address." );
    form.Form_Email.focus();
    return false ;
  }

  // ** END **
  return true ;
}
//-->
</script>

[Stevie D]

The problem with making using Javascript to make form fields mandatory is that it's so easy to bypass – just switch off Javascript and there it goes, and some people will have Javascript turned off anyway. So it depends how bothered you are about the mandatoriness of those fields – is it the end of the world if some people manage to submit the form without them filled in?

If it's absolutely essential that people fill in all mandatory fields then you need to use a server-side check, rather than relying on client-side controls.

A much easier way to achieve the same effect as Javascript is to use HTML5 forms. Just add the required attribute to any field, and people using Firefox, Chrome, Opera, IE10, Blackberry10 will be unable to submit the form without it filled in (this feature doesn't work on IE9 and below, or current versions of Safari/iOS or Android).

[laflair13]

Thanks for the replies, Would the HTML5 work on a .php?

In a nutshell, Visitor comes to site, sees a product, then clicks on a "request a quote" button, then the form opens. The form inputs also get put into a database. When they submit the form, it has the item number pre-written in the email that I receive.

So I get an email that says.

Laflair13 requested a quote
Item number: 1234
Phone number: 555-123-4567
Email: me@me.com

Thats how I have it working, but cannot figure out how to get it where they have to fill out at least their name and email before the form will submit.

[Stevie D]

Thanks for the replies, Would the HTML5 work on a .php?

In a nutshell, Visitor comes to site, sees a product, then clicks on a "request a quote" button, then the form opens. The form inputs also get put into a database. When they submit the form, it has the item number pre-written in the email that I receive.

So I get an email that says.

Laflair13 requested a quote
Item number: 1234
Phone number: 555-123-4567
Email: me@me.com

Thats how I have it working, but cannot figure out how to get it where they have to fill out at least their name and email before the form will submit.

All you need to do is put required as an attribute on the <input ...> tag(s), and the browser will not allow the form to be submitted without something being filled in. Additionally, if you use type="email", it will validate the field and make sure it contains a valid email address. It is just part of the HTML, so it will work whether you're using PHP or any other system.

[laflair13]

This is what I put, and it still went through.

<tr>
<td>*Your E-Mail:</td><td>&nbsp;</td><td><input type="email" id="Form_Email" name="Form_Email" required title="Email is Required!" /></td>
</tr>

So not sure why its not working.

Again, thank you for your time.

[PicnicTutorials]

Ya all you have to do is put that in the input. Right. That and the hundred other things you'll have to do to get it working cross browser now that your html5. You should probably include that part too in the simple description. If you want to use js which will work for 98% of people then just copy and paste my code above. If you want to use php then I can show you a simple script for that.

[laflair13]

I really dont care what I use, I just need it not to send without making sure they fill out Name and Email. I have tried everything I can think of and found a bunch of tutorials, It just isnt working for some reason. So Please, if you can help me with the php script, I would sure appreciate it.

[PicnicTutorials]

I hate to say, but if you can't get the js one working fat chance with the php one. But here it is http://www.visibilityinherit.com/cod...validation.php

Do this... Copy and paste my simple js code above into your web design program. Don't add your stuff yet. Just get mine working. It will out of the box. Once you have it working then add your layout to one piece at a time testing throughout. If it stops working go back.

[laflair13]

Thats actually one of the sites I used as a tutorial yesterday.

I actually used this one.

http://www.visibilityinherit.com/cod...validation.php

[Stevie D]

This is what I put, and it still went through.

<tr>
<td>*Your E-Mail:</td><td>*</td><td><input type="email" id="Form_Email" name="Form_Email" required title="Email is Required!" /></td>
</tr>

So not sure why its not working.

Are you using a browser that supports that (ie Firefox, Chrome, Opera, IE10 or Blackberry10)?