Javascript client side validation with PHP

Question

Below is some javascript validation I have on a simple form. The first time I hit submit the validation will work and fire and error messages. If I get an error, enter in new values that are still incorrect and hit submit again the validation does not work anymore and the values are passed to my php form.

Here is the javascript

<script type="text/javascript" language="javascript"> 
<!--
function validateMyForm ( ) { 
    var isValid = true;
    if ( document.form1.gamedate.value === "Select One" ) { 
            document.getElementById("errorMessage").innerHTML = ( "Please select a game" ); 
            isValid = false;
    } else if ( document.form1.wteam.value === "Select One" ) { 
            document.getElementById("errorMessage").innerHTML = ( "Please select the winning team" ); 
            isValid = false;
    } else if ( document.form1.wscore.value === "Select One" ) { 
            document.getElementById("errorMessage").innerHTML = ( "Please select the winning score" ); 
            isValid = false;
    } else if ( document.form1.lscore.value === "Select One" ) {
            document.getElementById("errorMessage").innerHTML = ( "Please select the losing score");
            isValid = false;
    } else if ( document.form1.wscore.value <= document.form1.lscore.value ){
            document.getElementById("errorMessage").innerHTML = ( "Winning score must be larger than the losing score");
            isValid = false;
    }
    return isValid;
}
//-->
</script>

php form with ******* to remove certain data

<form action="*********" method="post" name="form1">
      <div class="form-group">
           <label>Game Date:</label>
           <select name="gamedate">
               <option>Select One</option>
               <?php
               $stmt = $db->prepare("***********)");
               $stmt->execute(array(':**********' => $_SESSION['**********']));
                 while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
                 echo '<option value="';
                 echo $row['*********'];
                 echo '">';
                 echo $row['*********'];
                 echo '</option>';
                 }
               ?>
           </select>
      </div>
      <div class="form-group">
           <label>Winning Team</label>
           <select name="wteam">
               <option>Select One</option>
               <option value="1">Home</option>
               <option value="0">Opponent</option>
           </select>
       </div>
       <div class="form-group">
            <label>Winning Score</label>
            <select name="wscore">
                <option>Select One</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>          
            </select>
       </div>
       <div class="form-group">
            <label>Losing Score</label>
            <select name="lscore">
                <option>Select One</option>
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>  
            </select>
       </div>
       <div class="form-group">
       <input type="submit" value="Submit" onclick="javascript:return validateMyForm();">      
</form>

Any thoughts on what I am doing wrong?

Remove javascript: from the onclick. onclick already triggers javascript. — Daniel W.
– Daniel W., Commented Jan 20, 2015 at 19:27

developerwjk · Accepted Answer · 2015-01-20 19:27:24Z

4

Your validate function is being called from the wrong place. It should be called from the form's onsubmit method, not the submit button's onclick method:

<form action="*********" method="post" name="form1" onsubmit="return validateMyForm()">

answered Jan 20, 2015 at 19:27

developerwjk

8,6342 gold badges20 silver badges33 bronze badges

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

3 Comments

danl Over a year ago

Thank you for the advice. I updated the location of the onsubmit and tested and it still is allowing me to enter errant data, but it is now taking more clicks and updates to finally accept it so we are moving in the right direction at least :-)

developerwjk Over a year ago

@danl, Maybe it has to do with you using === rather than just ==. Try using just == and see what happens.

danl Over a year ago

Still is not working correctly with == instead of ===. I am starting to wonder if somehow I have to totally clear out a variable each time the error message is displayed.

pwarrenp · Accepted Answer · 2015-01-20 19:57:58Z

0

You're trying to grab the value of the drop-down in your javascript, but then you're comparing it against the text of the drop-down. Either assign values to the default drop-down options and compare against those, or change your javascript to grab the text (e.g. "Select One") instead.

answered Jan 20, 2015 at 19:57

pwarrenp

11 bronze badge

2 Comments

danl Over a year ago

I thought this worked as it I was not getting errors no matter how much I tried until I submitted the form correctly and then went back to the form page to enter in another selection and I am yet again able to submit errant data. :-(

pwarrenp Over a year ago

Comment out the contents of ValidateMyForm() and just have it always return false. Is it possible to submit errant data then? If not, start uncommenting and testing each validator individually. Add an alert to display the submitted data at the top of the function so you can make sure you're pulling data correctly and that your comparisons are accurate for each step in the validation.

greg_diesel · Accepted Answer · 2015-01-20 20:59:40Z

-1

Javascript validation is great however you should also be doing the same validation steps in your PHP form handler. Then if it does not pass validation from the PHP form handler, you redirect back to the page with your form again. Preferrably pre-filling the valid fields and noting which fields need to be corrected.

Javascript validation should be considered an ADD-ON to server side validation.

@danl Here is some basic PHP validation. I'm not certain what format your gamedate variable should be to check it. The others are very basic.

$haserror=false;

$gamedate=$_POST['gamedate'];
//not sure what is valid for gamedate.  But you should check it against something
if(strlen($gamedate)<1){
    $haserror=true;
    $errordetail.=' Game Date must be selected';
}

$wteam=$_POST['wteam'];
if(!(($wteam==1) || ($wteam==0))){
    $haserror=true;
    $errordetail.=' Winning team must be selected';
}

$wscore=$_POST['wscore'];
if(!is_numeric($wscore)){
    $haserror=true;
    $errordetail.=' Winning score does not appear to be a valid number';
}
$lscore=$_POST['lscore'];
if(!is_numeric($lscore)){
    $haserror=true;
    $errordetail.=' Losing score does not appear to be a valid number';
}

if($lscore > $wscore){
    $haserror=true;
    $errordetail.=' Losing score should not be more than the winning score.';
}

if($haserror){
   echo $errordetail;
   exit();
}
else{
   echo'  Success! .  Process the data here';
}

edited Jan 20, 2015 at 20:59

answered Jan 20, 2015 at 19:32

greg_diesel

2,9701 gold badge18 silver badges24 bronze badges

2 Comments

danl Over a year ago

Thank you for your comment. I am very new to code and have looked into PHP validation but it has all gone WAY over my head. Looking at the code above is there a simple way to validate that Select One is not entered and that wscore is greater than lscore with PHP?

danl Over a year ago

added the php validation and I have not been able to break it at all! thank you for your help!

Collectives™ on Stack Overflow

Javascript client side validation with PHP

3 Answers 3

3 Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related