Using javascript for form validation in a PHP file

Question

This is my first time trying javascript and having trouble getting it to work. I have a php file with a text box and a submit button. Upon clicking the submit button, I want javascript to preform a validation to make sure the text box is not empty. Please see my code below. Upon running, nothing happens when I click the submit button.

<html><head><script type="text/javascript">
function formValidator() {        
    var client_name = document.getElementByID('client_name');        
    if(notEmpty(client_name, "Client Name Blank")){
          return True;       
    }
    return False;         
 }   

function notEmpty(elem, helperMSG) {
    if(elem.length == 0) {
        alert(helperMSG);
        elem.focus();
        return False;
        }
     return True;   
    }
</script></head>

<?php
    echo '<body><form onsumbit="return formValidator()" method="post">
         <table border="1" cellspacing="0" cellpadding="0"><tr><td colspan="2">
         <h1>Add Account</h1></td></tr>
         <tr>
         <td>Client Name: <font size="1">(required)</font></td>
         <td><input type="text" id="client_name" name="client_name" size="35"/></td></tr>
         </table>
         <input type="submit" name="submit_account" value="Add Account"/>
         </form></body></html>';
?>

@harsha The <body> tag is opened and closed in the echo statement (<html> closing tag is there too), so it will end up being valid HTML when sent to the client as far as I can tell. Why it has to be echoed instead of just being plain markup, I have no idea. — ajp15243
– ajp15243, Commented May 21, 2013 at 16:47
@harsha As long as the final markup after PHP processing is valid markup, it is fine. This looks like it will be valid, as far as closing <html> and such goes. — ajp15243
– ajp15243, Commented May 21, 2013 at 16:49

Quentin · Accepted Answer · 2013-05-21 16:44:49Z

1

JavaScript is case sensitive. True and False are not defined (you mean true and false) so, on encountering them, the JavaScript engine will throw an exception and normal form submission will resume.
You are testing the length property of an HTMLInputElement which (unless you define it otherwise) will always be undefined. You want to test the length of the value. elem.value.length.

answered May 21, 2013 at 16:44

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dory Zidon · Accepted Answer · 2013-05-21 16:51:48Z

0

Few issues:

1) True and False, are not recognized as JavaScript is case sensitive. Try using true and false.

2) You also need to use the elem.value.length (or just the elem.value)

so change

elem.length

to elem.value.length.

3) No need for two check of true / false, one is enough.

html><head><script type="text/javascript">
function formValidator() {        
    var client_name = document.getElementByID('client_name');        
    return notEmpty(client_name, "Client Name Blank"); // no need for true false
 }   

function notEmpty(elem, helperMSG) {
    if(elem.value.length == 0) { ///changed to use value.
        alert(helperMSG);
        elem.focus();
        return false;  //change to lowercase false
    }
     return true;   //change to lowercase true.
  }
</script></head>

edited May 21, 2013 at 16:51

answered May 21, 2013 at 16:45

Dory Zidon

10.8k2 gold badges29 silver badges43 bronze badges

4 Comments

ajp15243 Over a year ago

I think that -1 was on the very first draft of your answer.

ajp15243 Over a year ago

I did not, I just noticed it there shortly after you first posted your answer.

Dory Zidon Over a year ago

np. tx..it's rather annoying, to -1 with no comment, I think they should make it a must to comment to -1, or at least give you like 1 minute after you post before you can -1...

Stevenyc091 Over a year ago

Dory, I tried your code but I am still not getting an alert message saying "Client Name Blank" when I leave the text box blank and click the submit button.

Vivek Sadh · Accepted Answer · 2013-05-21 16:56:56Z

0

Use this:-

 <script type="text/javascript">
    function formValidator() {        
        var client_name = document.getElementByID('client_name');        
        if(notEmpty(client_name, "Client Name Blank")){
              return true;        // Changed True to true
        }
        return false;         // Changed False to false
     }   

    function notEmpty(elem, helperMSG) {
        if(elem.value.length == 0)    // checking length of an element's value
 { 
            alert(helperMSG);
            elem.focus();
            return false;   // Changed False to false
            }
         return true;  // Changed True to true
        }
    </script>

edited May 21, 2013 at 16:56

answered May 21, 2013 at 16:45

Vivek Sadh

4,2683 gold badges35 silver badges55 bronze badges

6 Comments

ajp15243 Over a year ago

You should explain what you changed and why the change was needed, rather than just posting code and making others hunt for what changes you made.

ajp15243 Over a year ago

I think the -1 was given back when you had no explanation, too, and users aren't informed if someone edited an answer on which they voted, so they have to come back and look themselves to decide if the -1 should be removed.

Dory Zidon Over a year ago

or it could also be someone doing a stratigic -1..people do that too :(

Vivek Sadh Over a year ago

@dory oops, mixed jquery and javascript. Anyways, i have corrected it.

Dory Zidon Over a year ago

np.can you at least then give me 1 up on my answer ? :)

|

Collectives™ on Stack Overflow

Using javascript for form validation in a PHP file

3 Answers 3

Comments

4 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related