2

I'm working with a styled form, combining a number of jQuery plugins to help style form elements such as <select> and <input type="checkbox" />. These plugins hide the original form input and replace them with a styleable set of alternative HTML elements (<div>, <a>, <ul>, etc.). The only issue is they don't seem to handle the [required] attribute and apply the browsers' (Firefox, Chrome) box-shadow effects if the user attempts to submit the form without filling the required fields. Is there a simple way I can get those [required] attributes to translate onto the replacement elements? I would just extend the plugins and have them copy the [required] attribute to the replacement element, but I doubt that <div> tags support [required]. I've looked around on the Internets, but haven't found much in the way of helpful guides. Is there a workaround I'm missing? I just can't think of how to do it.

I suppose I could use full-fledged client-side validation, but I'm trying to keep the jQuery/JavaScript intervention to a minimum. If there isn't a good way to do this, I'll just go use a form validation plugin or something. For now, just for the sake of style consistency, I've disabled all the box-shadow effects with some CSS:

input:invalid, input:required,
textarea:invalid, textarea:required,
select:invalid, select:required {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -box-shadow: none;
}
Adrian
  • 727
  • 1
  • 9
  • 17
  • If the new elements are being added *after* the `input`, you could use `input:required + .newElementClass` (or something similar) to match it instead. – 0b10011 Jun 26 '12 at 17:15
  • So you mean if the plugin is hiding the original elements, and then appending their replacements immediately afterward in the same parent container? I do believe that is the case. I don't see how the `input:required + .newClass` helps the browser know to highlight them red on an incomplete form submission attempt, though. Are you just suggesting a jQuery selector to target them? – Adrian Jun 26 '12 at 17:18
  • Yes, but check in the generated source to be sure. And no, `input:required` is a selector used to style a form element that is required, and blank. Assuming the form is updated on keystroke (which in many cases is **not** true, again, test), then you would be able to highlight fields that have not been filled out. So, `input:required` is equivalent to `input:required + .someElementClass` if `

    ...

    ` follows the `input` element and you're trying to style `p.someElementClass`.     – 0b10011 Jun 26 '12 at 18:01
  • Ok, I found the following two threads in the related threads list: http://stackoverflow.com/questions/7587511/how-to-bind-to-the-submit-event-when-html5-validation-is-used and http://stackoverflow.com/questions/7920742/delay-html5-invalid-pseudo-class-until-the-first-event which seem to apply to my circumstances. Then I told jQuery to find the select elements and apply a `.on("invalid")` handler to `.effect("highlight, {color:"#FFAAAA"},3000)` highlight their puppet replacements, which seems to work great. I did not know the "invalid" event existed. Code in next comment (too long). – Adrian Jun 26 '12 at 19:39
  • `$("input[required],select[required],textarea[required]").on("invalid",function(){$(this).parent().effect("highlight",{color:"#FFAAAA"},3000);});` It's not great,but it works, because I've set up my form in a table due to the tabular nature of the data I'm working with. – Adrian Jun 26 '12 at 19:41
  • @Adrian how you adding your solution as an answer? – andho Jan 29 '13 at 08:44
  • Possible duplicate of [Why is the event listener for the invalid event not being called when using event bubbling?](https://stackoverflow.com/questions/18462859/why-is-the-event-listener-for-the-invalid-event-not-being-called-when-using-even) – Paul Sweatte Jun 20 '17 at 01:49

0 Answers0