CODEWITHSUNDEEP
htmlgoogle-chromeform-submit
Anthony Russo
Anthony Russo

Reputation: 931

Chrome not validating required fields

I am using the required to show form fields that are required. I heard this is a bug in chrome but wanted to know if there was a work around. My code is posted below.

echo "<br><br><input class=button id=submitbutton type=submit value=\"".pcrtlang("Submit     Service Request")."\" onclick=\"this.disabled=true;this.value='".pcrtlang("Sending Request")."...'; this.form.submit();\">";

I believe it will work if you remove the onlick function but then you have an issue if a user double clicks the submit button it will submit twice.

I use a javascript to disable the submit button to prevent double submissions, and then javascript to make the form submit.

Upvotes: 0

Views: 2640

Answers (2)

skeggse
skeggse

Reputation: 6323

I would be tempted to bind to the submit event of the containing form, and use the concept from _.debounce to limit the repetition of submissions:

jQuery:

// prevent the user from submitting the form twice within a second
var DELAY = 1000;
var lastSubmit = null;

$("#form").submit(function(e) {
  if (lastSubmit === null || Date.now() - lastSubmit > DELAY)
    return true;
  // two ways to prevent the default action
  e.preventDefault();
  return false;
});

Or staight JavaScript:

// prevent the user from submitting the form twice within a second
var DELAY = 1000;
var lastSubmit = null;

document.getElementById('form').addEventListener('submit', function(e) {
  if (lastSubmit === null || Date.now() - lastSubmit > DELAY)
    return true;
  // two ways to prevent the default action
  e.preventDefault();
  return false;
});

You can tune DELAY to meet your requirements, or handle the form submission failing to reset a disabled state.

If a requirement is to use attributes for the hooks, then:

echo "<form onsubmit=\"var stop = lastSubmit && Date.now() - lastSubmit <= 1000;stop && e.preventDefault();return !stop;\">";

Upvotes: 0

wendelbsilva
wendelbsilva

Reputation: 772

The problem is that onclick is being called everytime (even when its not going to submit by the browser). You can fix by changing the onclick to onsubmit (JSFiddle)

 <input class="button" id="submitbutton" type="submit" value="Submit" onsubmit="this.disabled=true;this.value='Sending Request';">

Upvotes: 1

Related Questions