www.webdeveloper.com
Results 1 to 4 of 4

Thread: php form validation help

  1. #1
    Join Date
    Mar 2008
    Posts
    16

    php form validation help

    I'm hoping someone can point me in the right direction.

    I'd like to have a form that validates on the same page and has the errors come up adjacent to the input fields themselves.

    I'm familiar with form validation, but I'm not sure how to go about scripting something like that.

    And also I need it to only show the form if either the submit button hasn't been hit at all, or there are errors. Once the form is validated and comes up true, I wand the form to hide and a thank you message to come up.

    Are there any tutorials out there on this? I find tons, but only to list error at the bottom of the page, etc...

    Thanks.

  2. #2
    Join Date
    Jul 2008
    Posts
    13
    Although I know that some don't agree with using tables to place form elements, I have used tables to do this with several forms with no problem. Although, I would say that the best thing to do would be to start with the skeleton of the form and the table, and then you can add the inner elements (checking for errors!!!). Something like the following would place the input area and the error message side by side:

    Code:
    <table><tr>
    <td>
    <textarea>something</textarea>
    </td>
    <td><div id='error_msg_1'></div>
    </td></tr>
    etc.   etc.   etc.   etc.   etc.   etc.   
    </table>
    As the user types, the page could validate on the fly
    (this.form.1_textarea could be changed to this.id so that you could create the form with a FOR loop):

    Code:
    <textarea name="1_textarea" id="1_textarea" 
    onKeyDown="validateFxn(this.form.1_textarea,getRefToDiv('error_msg_1').id);" 
    onKeyUp="validateFxn(this.form.1_textarea,getRefToDiv('error_msg_1').id);">
    </textarea><br>
    You can use getElementByID().innerhtml (JavaScript --- JS) to change the content of the error message as the user types w/ this type of JS fxn:

    Code:
    <script language="javascript">
    <!--
    function validateFxn(checkField, errorField) 
     {
         if(something about checkField)
           {
               getElementByID(errorField).innerHTML='Error';
            }
         else if(something else about checkField)
            {
               getElementByID(errorField).innerHTML='OK';
             }
          else
             {
                getElementByID(errorField).innerHTML='';
             }
     }
    //-->
    </script>

  3. #3
    Join Date
    Mar 2008
    Posts
    16
    Thanks for the help. I'm comfortable with PHP but I haven't delved into javascript for validating forms. I'll have to try it.

    I was thinking I could use absolutely positioned divs for the errors, although I'd have to make a separate div for each error and I'm sure it would be a nightmare to get it lined up cross browser. I was looking for a PHP only solution right now because I wouldn't know how to troubleshoot with Javascript. I guess it's time to get some JS books!

    Thanks again.

  4. #4
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    18,923
    You can save the errors in an array using the applicable form field names as the keys. Then when re-outputting the form, check to see if there is an error for that field and output the desired HTML accordingly:
    PHP Code:
    <label>Some Field: <input name='some_field' type='text' value='<?php
    if(isset($_POST['some_field']))
    {
       echo 
    htmlentities($_POST['some_field'], ENT_QUOTES);
    }
    ?>'><?php
    if(!empty($errors['some_field']))
    {
       echo 
    "<span class='error'>".htmlentities($errors['some_field'], ENT_QUOTES)."</span>";
    }
    ?><br />
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

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