Chrome not validating required fields

Question

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.

Try add \" for the attributes. <input class=\"button\" id=\"submission" type=\"submit\" required>. I just tried the required in all 3 versions of Chrome I have (Linux Mageia, MacOS 10.6 and Win7) and it worked. Im using this page to test. — wendelbsilva
– wendelbsilva, Commented Jul 18, 2013 at 19:15
I didn't mean to type required in the code above because that is the submit button. I added the \" for each attribute but it still submits without checking in chrome. I use a javascript to disable the submit button to prevent double submissions, and then javascript to make the form submit, if that makes a difference to your answer. — Anthony Russo
– Anthony Russo, Commented Jul 18, 2013 at 19:26
A note here: html5 supports boolean attributes, meaning that you should specify <input required> instead of <input required="required">. — skeggse
– skeggse, Commented Jul 18, 2013 at 19:42
@AnthonyRusso: you can edit your questions if the specifics were incorrect. — skeggse
– skeggse, Commented Jul 18, 2013 at 19:53
Yes I was using just required. I apologize for the confusion. I edited. — Anthony Russo
– Anthony Russo, Commented Jul 18, 2013 at 20:00

wendelbsilva · Accepted Answer · 2013-07-18 19:38:19Z

1

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';">

answered Jul 18, 2013 at 19:38

wendelbsilva

7716 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

skeggse · Accepted Answer · 2013-07-18 19:47:45Z

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;\">";

Collectives™ on Stack Overflow

Chrome not validating required fields

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related