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.
form
need anaction
? – Adrian Larson♦ Jan 21 '17 at 23:34