Validating form with javascript only calling action if it's valid

JavaScript
1

I’m not sure how to do this because I added a js function to run on a form’s submit button’s click event. The js function does run, but then no matter what, the php script is called. The alert runs, then it goes to the php script. How can I stop it doing it?

here is js function:


function checkFields(form){
    var myForm= document.getElementById(form)
   if(myForm!="li-comment-form"){
   alert("wrong form")
   
   }else{
    
    myForm.submit()
   
   }
}

My form is here:

<form id="lbi-comment-form"  method="post" action="insertComment.php">
            <p>Add comment</p>
            <ul>
              <li><input type="text" class="prefill-tf" name="name" id="Name"/></li>
              <li><input type="text" class="prefill-tf" name="email" id="Email"/></li>
              <li><input type="text" class="prefill-tf" name="website" id="Website"/></li>
              <li><textarea rows="5" class="prefill-tf" name="commment" id="Comment"></textarea></li>
              <li><input type="submit" value="submit" onclick="checkFields('lbi-comment-form' )" /></li>
              <li><input type="hidden" name="asset_id" value="lbi-type"/></li>
            </ul>
          </form>
2

You’ve given your form the id “lbi-comment-form” but in your JS you have:
var myForm= document.getElementById(form)

The id must be the same !

3

I was playing about with the code, seeing if my function works. Here’s my updated function and html:



function checkFields(form){
    var myForm= form.parentNode.parentNode.parentNode.id;
  
     if(myForm!="lbi-comment-form"){
   alert("wrong form")
   
   }else{
      myForm.submit()
   
   }
}

   <form id="lbi-comment-form"  method="post" action="insertComment.php">
            <p>Add comment</p>
            <ul>
              <li><input type="text" class="prefill-tf" name="name" id="Name"/></li>
              <li><input type="text" class="prefill-tf" name="email" id="Email"/></li>
              <li><input type="text" class="prefill-tf" name="website" id="Website"/></li>
              <li><textarea rows="5" class="prefill-tf" name="commment" id="Comment"></textarea></li>
              <li><input type="submit" onclick="checkFields(this)" value="submit"  /></li>
              <li><input type="hidden" name="asset_id" value="lbi-type"/></li>
            </ul>
          </form>
4

You need to prevent the ‘submit’ from happening, and divert to your JS script. Try something like:-

 onsubmit="return checkfields(form)"

in the PHP setting up the form, so it becomes:-

<form id="lbi-comment-form"  method="post" action="insertComment.php" onsubmit="return checkfields(form)">
5

You need to return false from the JavaScript to prevent the form action running again after the JavaScript finishes.

6

thanks all. Just had a thought, do you think it’s better to validate via php instead?

7

You need to validate using PHP regardless of whether you validate using JavaScript or not since the two validations are for different purposes.

Validate in PHP for your purposes to make sure the content is valid.

Validate in JavaScript for your visitor’s convenience - to save them having to reload the page if they enter something invalid.

8

Well this validation is to check there aren’t empty fields, and that email has an “@” symbol in it, etc etc. Should I do that via js?