如何验证 Materializecss 单选按钮？

Question

I tried to implement validation to display an error message on radio button but I couldn't succeed.

I'm using Materializecss framework.

The validation/displaying error message works on text box element and not in radio button.

Code:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css"> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script> <form> <div class="row"> <div class="input-field col s6"> <input class="validate" type="radio" name="mode" value="M" id="m" required="required" data-error="Error msg here"> <label for="m">M</label> </div> <div class="input-field col s6"> <input class="validate" type="radio" name="mode" value="F" id="f" required="required" data-error="Error msg here"> <label for="f">F</label> </div> <div class="col s12" style="margin-top:20px"> <button type="submit" class="waves-effect waves-green btn"> Submit </button> </div> </div> </form>

Why the error message is not displaying. Any help would be appreciated. Thanks.

Answer 1

If you can use jQuery, you could implement a solution based on this fiddle .

By placing the group of radio buttons in a container div with class radioRequired :

<div class="col s12 radioRequired" name="mode" data-error="Error msg here">

JQuery can be used to check if there are any selected radio buttons with the name specified in the container. If there are none, highlight the div and add an error message with class radioWarning and text based on the data-error setting in the container. If a selection has been made, remove the highlight and the error message.

The radio buttons can be specified as:

  <input type="radio" name="mode" value="M" id="m">
  <label for="m">M</label>

Finally, if there are radioWarning s, prevent the default Submit action otherwise allow it as normal.

Answer 2

I have worked with this framework and there is nothing to do with radio button form validation by default. I used following structure in order to add validation to my radio buttons.

I added a class name "radio" to input parents and a script before closing body tag.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css"> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script> <form> <div class="row"> <div class="radio input-field col s6"> <input class="validate" type="radio" name="mode" value="M" id="m" required="required" data-error="Error msg here"> <label for="m">M</label> </div> <div class="radio input-field col s6"> <input class="validate" type="radio" name="mode" value="F" id="f" required="required" data-error="Error msg here"> <label for="f">F</label> </div> <div class="col s12" style="margin-top:20px"> <button type="submit" class="waves-effect waves-green btn"> Submit </button> </div> </div> </form> <script> $('.radio lable, .radio input').click(function(){$(this).parent().siblings().removeClass('checked'); $(this).parent().addClass("checked")}); $("form button[type=submit]").click(function(e){ e.preventDefault(); $("form input:radio").each(function() { if ($(this).attr('required')){ if(!$(this).parent().hasClass('checked')){ //some code for when nothing is chosen console.log("nothing is chosen"); } else{ console.log("value of checked radio button is: "+$(this).val()); } } else { console.log("not required"); } }); }); </script>

I hope it solves the issue.

Answer 3

https://jqueryvalidation.org/ Use this plugin. Jquery Validation. It worked for me. It is well documented and easy to use.

You put some rules, then call out the validate function from that plugin.

Answer 4

I'm using materializes for frontend and to validate the buttons radio use jquery.validate.js and in the change the lines

elementID = this.idOrName( elemnt ), for elementID = $( elemnt ).attr("id"),

and comment on this line this.addWrapper( errors ).hide();

Answer 5

A quick research on materialize.css reveals that this framework's style is missing proper selectors for an input of type radio , check out this image:

Following code contains styling of :after selectors for labels. However, adding a selector for radio inputs doesn't seem to be fixing the problem for me.

To fix your issue, you can either:

• Make a form validator function which checks the radios value and alerts the user, then hook this function to a form's onsubmit event.
• Attach a validator function to a submit button, which will artificially prevent the button from being clicked and the form from being submitted.

Here's a more cleaner approach.

I guess developers of this framework excluded the code for radiobutton validation intentionally. Radio button is a common UI element which comes in radio button groups . Radio button is specific in a way there can be only one selected value in a group, and there must be a selected value .

So, change your M input from this:

<input class="validate" type="radio" name="mode" value="M" id="m" required="required" data-error="Error msg here">

To this:

<input checked required class="validate" type="radio" name="mode" value="M" id="m">

• HTML5 doesn't require a value for specific modifiers such as required , disabled , selected so I removed it.
• Removed unused data-error attribute.
• I moved modifiers closer to the beginning so you see those at a glance.
• I added a checked modifier so the radio group has a default value.

It appears you're making a gender selector. There are only two genders and you always have a gender, there's no reason to not have a default value. In terms of UI/UX design a radio button group should always have a checked element. If you want to, you might include third option if the user doesn't want to provide this info.

Here's your updated snippet:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css"> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script> <form> <div class="row"> <div class="input-field col s6"> <input checked required class="validate" type="radio" name="mode" value="M" id="m"> <label for="m">M</label> </div> <div class="input-field col s6"> <input required class="validate" type="radio" name="mode" value="F" id="f"> <label for="f">F</label> </div> <div class="col s12" style="margin-top:20px"> <button type="submit" class="waves-effect waves-green btn"> Submit </button> </div> </div> </form>