How to check the correct Materializecss switches?

Question

I tried to check to display an error message on the switch, but I could not succeed.

I am using the Materializecss framework.

The check / display error message works on a text field element, not a switch.

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 displayed. Any help would be greatly appreciated. Thanks.

Answer 1

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

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

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

JQuery can be used to check for any selected radio buttons with the name specified in the container. If not, highlight the div and add an error message with the radioWarning class and text based on setting the data error in the container. If a choice is made, remove the highlight and error message.

Radio buttons can be specified as:

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

Finally, if there are radio waves, deny the default action "Submit", otherwise enable it as usual.

Answer 2

A quick study of materialize.css shows that in this frame style there is no proper selector for input like radio , check this image:

The following code styling selectors :after for labels. However, adding a selector for the radio inputs does not seem to fix the issue for me.

To fix the problem, you can:

• Make a validator validation function that checks the value of the radio signal and warns the user, then binds this function to an onsubmit form onsubmit .
• Attach the validator function to the submit button, which artificially prevents the button from clicking and submitting the form.

Here's a more understandable approach.

I assume that the developers of this structure deliberately excluded the code for checking the radio block. The radio button is a common user interface element that is part of the radio button group. The "Radio" button is specific, since there can only be one selected value in a group, but must be a selected value .

So, change your M input as follows:

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

For this:

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

• HTML5 does not require a value for certain modifiers, such as required , disabled , selected , so I deleted it.
• Removed the unused data-error attribute.
• I moved the modifiers closer to the beginning, so you see them at a glance.
• I added the checked modifier so that the group of radio stations has a default value.

It seems you are doing a gender selector. There are only two genders, and you always have a gender; there is no reason not to have a default value. In terms of UI / UX design, the switch group should always have a checked item. If you want, you can enable the third option if the user does not want to provide this information.

Here is 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> 

Answer 3

I worked with this framework and by default has nothing to do with button shape validation. I used the following structure to add confirmation to my switches.

I added the class name “radio” to enter my parents and script before closing the 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> 

Hope it solves the problem.

Answer 4

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

You added some rules, then you call the validation function of this plugin.