I have a basic webform that calls a Javascript method after clicking on the submit button. The method applies some logic and when it's done, the form is submitted.

It seems that I can't force the user to fill up the form anymore, although I see the error flag appears for a split second, the form still submits even when it's empty. It ignores the 'required' attribute.

Form (snippet):

<form method='post' id='prechatForm' autocomplete="on">

    <div class="form-group">
        <label>What is your first name?</label>
        <span class="form-required">*</span>
        <input type="text" name='liveagent.prechat:ContactFirstName' class="form-control" id="firstName" placeholder="John" required="true" autofocus="true"></input>
    <div class="form-group">
        <label>What is your last name?</label>
        <span class="form-required">*</span>
        <input type="text" name='liveagent.prechat:ContactLastName' class="form-control" id="lastName" placeholder="Smith" required="true"></input>
    <input type='submit' class="btn btn-default btn-lg btn-outline" value='Chat Now' id='prechat_submit' onclick="setName();checkIfCaseExists()" />

JS method:

function checkIfCaseExists() {
    some remote logic...................

    return true;

set 'action' attribute to form:

 (function() {
                function handlePageLoad() {
                    var endpointMatcher = new RegExp("[\\?\\&]endpoint=([^&#]*)");
                if (window.addEventListener) {
                    window.addEventListener('load', handlePageLoad, false);
                } else {
                    window.attachEvent('onload', handlePageLoad, false);

when I use the regular functionality of the submit button, i.e. without calling any method on the way and then submitting, the validation works fine.


2 Answers 2


This is more of a web development question and not related to Salesforce.

If you want to run some JS code upon clicking of the submit button then your javascript method should return true or false based on the form validation. HTMLFormElement provides checkValidity method and it returns true or false based on the form validity.

Here is a simple solution for the problem you are facing:


        <script type="text/javascript">
            function submiBtnClick(){
                var formValid = document.forms["post-form"].checkValidity();
                return formValid;
        <form id="post-form" method="POST" action="http://www.example.com">
            <input type="text" name="Name" required="true">
            <input type="text" name="Age" required="true">
            <input type="text" name="city" required="false">
            <input type="submit" name="Submit" onclick="submiBtnClick();">
  • 2
    Just wanted to share an update, according to MDN for this purpose it's better to use reportValidity() and not checkValidity() - the former allows the user to see on the form where is the missing info but the latter does not, it just tells you if the form is valid or not.
    – Json
    Commented Nov 27, 2019 at 12:44
<form method='post' id='prechatForm' autocomplete="on"></form>

Better to use this way. Add action, and onsubmit event here

<form action="/add_action_here" onsubmit="return checkIfCaseExists()" >

And submit either :

<input type='submit' />

or this way :

<button type="submit">Submit</button>

both will work very well.

  function checkIfCaseExists() {
    var form_valid = false;
    //whatever condition you want to check
      form_valid = true;

    return form_valid;
  /* if the form_valid is true your form submits otherwise it stops with validations */

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .