www.webdeveloper.com
Results 1 to 11 of 11

Thread: Required Field in a Form

  1. #1
    Join Date
    Jul 2010
    Posts
    4

    Post Required Field in a Form

    Hi,

    I'm not massively experienced with JS, but have some experience with php so can read the code reasonably well.

    I'm looking to make both fields on my html form required, just a simple alert window would do the trick. I've tried a few simple examples, but they don't seem to work with my form, I think it's because I have a little JS in the form itself, which could be conflicting.

    Here is my form:

    Code:
    <form id="two" action=" " name=form method="post">
        <input name="email" id="email" type="text" value="E-Mail" onfocus="this.value=(this.value=='E-Mail') ? '' : this.value;" onblur="this.value=(this.value=='') ? 'E-Mail' : this.value;">
        <input name="city" id="city" type="text" value="City" onfocus="this.value=(this.value=='City') ? '' : this.value;" onblur="this.value=(this.value=='') ? 'City' : this.value;">    
      	<input id="button" type="submit" value="Get Free Track">
    	</form>
    I would like both fields to be required, like a say, a little alert would be just fine.

    The sources I read and tried (unsuccessfully) were:
    http://www.netmechanic.com/news/vol6/javascript_no4.htm
    http://javascript.internet.com/forms...ed-fields.html
    http://www.web-source.net/web_develo...orm_fields.htm

    Could anyone point me in the right direction?

    Thanks,
    James

  2. #2
    Join Date
    Jun 2007
    Posts
    667
    Code:
    <form id="two" action=" " name=form method="post" onsubmit=return reqd( email, city )>
    
    ...
    
    <script type='text/javascript'>
    
    function reqd( )
    {
      var rv = true, elem;
      
      for( var i = 0; i < arguments.length && rv; i++ )
      {     
       if( !/\S/.test( ( elem = arguments[i] ).value ) || elem.value == elem.defaultValue )
       {
        alert( elem.name + ' required' );
        rv = false;
       }
      }
    
      return rv;
    }
    
    </script>
    Y_U U_G_A_E_U_ B_S_A_D_

  3. #3
    Join Date
    Mar 2010
    Posts
    2,803
    To validate any required form text fields you can simply check if they are empty or = null.

    This w3schools tute of form validation gives some basic examples.

    I would do something like this that displays all invalid inputs at the end of the function rather than 1 invalid field at the time.

    PHP Code:
    function validateForm() {

    var 
    username document.getElementById('txtUsername').value;
    var 
    password document.getElementById('txtPassword').value;

    var 
    errMsg "The following inputs are missing or invalid: \n\n";

    var 
    isDataValid true;

    if(
    username == '' || username == null) {  //add whatever other validation criteria you need between the ()
        
    isDataValid false;
        
    errMsg errMsg "username\n";
    }

    if(
    password == '' || password == null) {   //add whatever other validation criteria you need between the ()
        
    isDataValid false;
        
    errMsg errMsg "password\n";
    }

    //display any error messages
    if(!isDataValid) {
       
    alert(errMsg);
    }

    return 
    isDataValid;


    Last edited by tirna; 07-08-2010 at 07:10 PM.

  4. #4
    Join Date
    Jun 2007
    Posts
    667
    The OP is using event handlers that restore empty fields to initial value, so just checking for "" or null isn't going to be appropriate.
    What if password == " " ?
    Y_U U_G_A_E_U_ B_S_A_D_

  5. #5
    Join Date
    Mar 2010
    Posts
    2,803
    In the comments in the code I posted I clearly said the OP can add whatever additional criteria he/she needs to make the input valid.

    I don't see any point in me making assumptions on what might or might not be valid.

    If you read my signature below each post you will see anything I post is my opnion only and to be taken as general advice only.

    I am not anyone's payroll here to give specific advice to every single post I reply to.

  6. #6
    Join Date
    Jul 2010
    Posts
    4
    Thanks for the replies. The first code didn't seem to do anything for me.

    The second is in PHP, which although is much more understandable for me, unfortunately not what I need. I want the form to check for valid fields before the post action is taken...

    The OP is using event handlers that restore empty fields to initial value, so just checking for "" or null isn't going to be appropriate.
    What if password == " " ?
    This is exactly my problem, and what was I was looking for some direction on...

    Thanks,
    James

  7. #7
    Join Date
    Mar 2010
    Posts
    2,803
    Quote Originally Posted by jamesnotjamie View Post
    Hi,

    I'm not massively experienced with JS, but have some experience with php so can read the code reasonably well.
    I'm not sure you even know what php code is. Where is the php code you claim to see in your last post?

    I posted javascript code enclosed in php formatting tags which is what I have done in probably 99% of my posts.

    In your first post you asked that fields be only required. Now you want them to be checked for validity, but you didn't specify what criteria will make each input valid. I'm not going to waste time making assumptions on what you would consider a valid input so I included a comment in my code saying you can add your own additional criteria.

    If you need additional direction, it is quicker and easier for me to refer you to the relevent w3school tutorials where you can learn all the skills you will need rather than spoon feed code.

    Good luck

  8. #8
    Join Date
    Jun 2007
    Posts
    667
    Quote Originally Posted by jamesnotjamie View Post
    Thanks for the replies. The first code didn't seem to do anything for me.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>TEST</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body>
    <form id="two" action=" " name='form' method="post" onsubmit = "return reqd( email, city )">
    <p>
      <input name="email" id="email" type="text" value="E-Mail" onfocus="this.value=(this.value=='E-Mail') ? '' : this.value;" onblur="this.value=(this.value=='') ? 'E-Mail' : this.value;">
        <input name="city" id="city" type="text" value="City" onfocus="this.value=(this.value=='City') ? '' : this.value;" onblur="this.value=(this.value=='') ? 'City' : this.value;">    
    <input id="button" type="submit" value="Get Free Track">
    </form>
    
    <script type='text/javascript'>
    
    function reqd( )
    {
      var rv = true, elem;
      
      for( var i = 0; i < arguments.length && rv; i++ )
      {     
       if( !/\S/.test( ( elem = arguments[i] ).value ) || elem.value == elem.defaultValue )
       {
        alert( elem.name + ' required' );
        rv = false;
       }
      }
    
      return rv;
    }
    
    </script>
    
    </body>
    </html>
    Y_U U_G_A_E_U_ B_S_A_D_

  9. #9
    Join Date
    Jul 2010
    Posts
    4
    Apologies tirna, for not making myself clearer. Indeed as I look back I got confused by the PHP opening tags (which I have never seen in your posts as I haven't subscribed to your wisdom). I did claim in my first post that I can read some PHP, but obviously, as everyone knows, we all start somewhere and I'm not as advanced as you.

    I did even try and make the point about validity when I stated
    I think it's because I have a little JS in the form itself, which could be conflicting.
    Excuse my ignorance if I didn't refer to this as 'validity'.

    I appreciated your first post for trying to help me out, however I didn't see the need to make me feel smaller than you.

    I'm get pretty sick of joining forums, trying to be as informative as possible, and getting made to feel bad for asking the initial question! I never asked to be 'Spoon Fed'


    Sterling Isfine, thank you that code worked perfectly. I'm going to try and break it apart to learn from it wherever possible.

    Thanks,
    James

  10. #10
    Join Date
    Apr 2010
    Posts
    121
    See my post a while back: http://www.webdeveloper.com/forum/sh...63&postcount=7

    I think this may be of help to you.

  11. #11
    Join Date
    Jul 2010
    Posts
    4
    Quote Originally Posted by SMTS View Post
    See my post a while back: http://www.webdeveloper.com/forum/sh...63&postcount=7

    I think this may be of help to you.
    Thanks, I'll have a read through this, might help me get to grips with it...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles