Styling non checked inputs

JavaScript
1

Take a look at this fiddle…the purpose of the code there is to style the inputs that the user did not check…on submit(you do not see any submit there,that role is resembled by the “style” div)…so clicking “style” the inputs that are not checked are styled.

Question:is there any shorter/cleaner alternative to this code?I think much code is there to do a simple task.

2

There is indeed - you can add required to the radio buttons:

    <input type="radio" name="groupOne" value="foo" required>

and use the click event on the submit button, to add a submitted class to each fieldset:

function formSubmitHandler(evt) {
  var fieldsets = form.querySelectorAll("fieldset");
  fieldsets.forEach(function(fieldset) {
    fieldset.classList.add("submitted");
  });
}

var form = document.querySelector("#myForm");
var submitButton = form.querySelector("[name='submit']")
submitButton.addEventListener("click", formSubmitHandler);

which you can use to then make invalid fields visible.

fieldset.submitted:invalid {
  border: 1px solid red;
}

I’ve put together a working example at https://jsfiddle.net/pmw57/f52pegxp/5/

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.