2

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):

<h1>Form</h1>
<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>
    <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>
    </div>
    <input type='submit' class="btn btn-default btn-lg btn-outline" value='Chat Now' id='prechat_submit' onclick="setName();checkIfCaseExists()" />

JS method:

<script>
function checkIfCaseExists() {
    some remote logic...................

    document.forms["prechatForm"].submit();
    return true;
}

set 'action' attribute to form:

 (function() {
                function handlePageLoad() {
                    var endpointMatcher = new RegExp("[\\?\\&]endpoint=([^&#]*)");
                    document.getElementById('prechatForm').setAttribute('action',
                        decodeURIComponent(endpointMatcher.exec(document.location.search)[1]));
                }
                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.

|improve this question
0

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:

test.html

<html>
    <head>
        <script type="text/javascript">
            function submiBtnClick(){
                var formValid = document.forms["post-form"].checkValidity();
                return formValid;
            }
        </script>
    </head>
    <body>
        <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();">
        </form>
    </body>
</html>
|improve this answer
  • 1
    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 Nov 27 '19 at 12:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.