SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Guru laflair13's Avatar
    Join Date
    Nov 2004
    Location
    TN
    Posts
    610
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Making form fields mandatory

    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.
    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.
    Code:
    <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

    Code:
    /* 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
    Thanks In Advance

    David

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,625
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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

  3. #3
    SitePoint Guru laflair13's Avatar
    Join Date
    Nov 2004
    Location
    TN
    Posts
    610
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Didnt work.

    Form
    Code:
    <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
    Code:
    <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>
    Thanks In Advance

    David

  4. #4
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,829
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    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).

  5. #5
    SitePoint Guru laflair13's Avatar
    Join Date
    Nov 2004
    Location
    TN
    Posts
    610
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Thanks In Advance

    David

  6. #6
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,829
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by laflair13 View Post
    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.

  7. #7
    SitePoint Guru laflair13's Avatar
    Join Date
    Nov 2004
    Location
    TN
    Posts
    610
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is what I put, and it still went through.

    Code:
    <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.
    Thanks In Advance

    David

  8. #8
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,625
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    SitePoint Guru laflair13's Avatar
    Join Date
    Nov 2004
    Location
    TN
    Posts
    610
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Thanks In Advance

    David

  10. #10
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,625
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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.

  11. #11
    SitePoint Guru laflair13's Avatar
    Join Date
    Nov 2004
    Location
    TN
    Posts
    610
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thats actually one of the sites I used as a tutorial yesterday.

    I actually used this one.

    http://www.visibilityinherit.com/cod...validation.php
    Thanks In Advance

    David

  12. #12
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,829
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by laflair13 View Post
    This is what I put, and it still went through.

    Code:
    <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)?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •