Check validation script not returning if condition is true

Question

I have a form that includes a checkbox:

<form action="tienda3.php">
    <div class="form-group">
        <label for="email">Email address:</label>
        <input type="email" class="form-control" id="email" name="email" placeholder="Enter your email to confirm the order">
    </div>


    <div class="form-group">
        <div class="checkbox">
            <label><input type="checkbox" id="TOS" value="This"> I certify that I am of legal age and I have read and agree to the 
                <a href="../terms.php" target="_blank">Terms of use</a> and
                <a href="../privacy.php" target="_blank"> Privacy Policy </a>of Sdocks LLC</label>
            </div>
        </div>
        <button type="submit" onclick="validate()" class="btn btn-primary">Submit</button>
    </form>

I need to verify that the user checks the checkbox to post the form to tienda3.php.

I am using this script to validate that the user has checked the checkbox or not:

<script type=text/javascript>
    function validate(){
        if (document.getElementById('TOS').checked){
            alert("checked") ;
        }else{
            alert("You didn't check it! Let me check it for you.");
            return true;
        }
    }
</script>

If the checkbox is checked then the form is posted to tienda3.php, else an alert must be shown to inform the user that it is mandatory to check the checkbox to continue the process.

In my case, the form is always posted to tienda3.php. The script detects if the checkbox is checked or not, but in both cases, the form always opens file tienda3.php

Please may you not use onClick on buttons inside forms? Use onSubmit instead. — evolutionxbox, Jul 30 '20 at 18:47
@evolutionxbox, done, but this change is not solving my issue, — mvasco, Jul 30 '20 at 18:49
Sorry, my comment wasn't entirely about your issue, but it will prevent issues. — evolutionxbox, Jul 30 '20 at 18:51
@evolutionxbox, I appreciate your comment and will take it into account up to now. — mvasco, Jul 30 '20 at 18:53
Please, will you stop propagating the use of unsafe-inline javascripts from the 80s? :-) Create and deal with [events in the proper way](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events). — IncredibleHat, Jul 30 '20 at 19:00
@IncredibleHat, please read the previous comments. I promise not to propagate the use of unsafe javascripts. Thank you. — mvasco, Jul 30 '20 at 19:03
Sorry, comment not directed straight at you. Its in general. Everyone needs to stop with the `onWhatever="jsCrap()"` stuffed in html elements ;-) — IncredibleHat, Jul 30 '20 at 19:06

verjas · Accepted Answer · 2020-07-30T19:22:27.037

1

I suggest you make this changes:

/* replace this:
 * <form action="tienda3.php"> */

 <form action="tienda3.php" onsubmit="return validate(event)" >

 /* replace this:
  * <button type="submit" onclick="validate()" class="btn btn-primary">Submit</button> */
<button type="submit" class="btn btn-primary">Submit</button>

/* and replace the validate() function with: */
function validate(event){
  if (document.getElementById('TOS').checked){
    alert("checked") ;
    return true;
  } else {
    event.preventDefault();
    alert("You didn't check it! Let me check it for you.");
    return false;
  }
}

Let me know if it worked as expected. You can also find solutions by searching Stackoverflow How to prevent form from being submitted - inline javascript

edited Jul 30 '20 at 19:22

answered Jul 30 '20 at 19:06

verjas

1,793
1
15
18

Thank you, but it is not working for me. Your proposal is not checking if checkbox checked or not – mvasco Jul 30 '20 at 19:16
1

Sorry, put the "onsubmit" as a
attribute. See answer now (edited).
– verjas Jul 30 '20 at 19:23

score 1 · Answer 2 · answered Jul 30 '20 at 19:08

I prefer to use ajax request instead of form action

HTML

<form>
    <div class="form-group">
       <label for="email">Email address:</label>
       <input type="email" class="form-control" id="email" name="email" placeholder="Enter your email to confirm the order">
   </div>

   <div class="form-group">
        <div class="checkbox">
            <label><input type="checkbox" id="TOS" value="This"> I certify that I am of legal age and I have read and agree to the 
            <a href="../terms.php" target="_blank">Terms of use</a> and
            <a href="../privacy.php" target="_blank"> Privacy Policy </a>of Sdocks LLC</label>
        </div>
    </div>
 <button type="button" onclick="SubmitRequest()" class="btn btn-primary">Submit</button>
</form>

js

function SubmitRequest() {
  if (document.getElementById('TOS').checked){
  var postObj = {
      email: $('#email').val(),
  };
  $.ajax({
      url: "/tienda3.php",
      data: JSON.stringify(postObj),
      type: "POST",
      contentType: "application/json;charset=utf-8",
      dataType: "json",
      success: function (result) {
       console.log(result)
      },
      error: function (errormessage) {
          console.log(errormessage);
      }
  });
}

});

Check validation script not returning if condition is true

2 Answers2