locked
validation message appearing once RRS feed

  • Question

  • User-2132746437 posted

    my form is dynamic, validation, works, however, the message is only showing for one section.:

    There can be multiple sections of radio buttons on the page, I want the message to appear for each section that has nothing selected, right now, it's only appearing for the first section:

    html: (builds the radio buttons)

    foreach(var i in Model.Locations)
    { 
         <input type="radio" id="@Model.LocationId" required="@Model.Required" name="@Model.Location"/>  //is this a required field?
        <label>@i.Text</label>
    }
    <span id="error" style="display:none">Please select a location</span>

    Validation code:

    var required = $(this).attr("required")
    var name = $(this).attr("name") if(('input[type="radio"]) && (required == "required")) { $("input:radio").each(function() { if($(input:radio[class="loc" + n + "]:checked").length == 0) { $("#error").show(); } } }

    the message shows, but only shows for the first radio group, even though I have 2 radio groups on the page  that are required. I want to see the message on both groups that are required and nothing is checked:

    this is my last project before I roll into retirement, but keeps me banging my head. . . . .

    Thursday, September 26, 2019 7:09 PM

All replies

  • User-474980206 posted

    you error display code always display the spa door no matter the source

      $("#error").show();

    because #error should be unique. if not, jQuery does the first match. you probably want to put the location class (though I'd use a data- rather that class) on the error span, then its:

    $("span.loc" + n)[$("input:radio.loc" + n + ":checked").length) ? "show" : "hide"]();
    

    Thursday, September 26, 2019 7:23 PM
  • User-2132746437 posted

    How can I make it unique?  I gave it a name such as 

    <span id="error @Model.locationId" style="display:none">Please select a location</span>

    $("#error" + name).show();

    and even though I can see it dev tools with the unique name, it still doesn't appear

    Thursday, September 26, 2019 7:26 PM
  • User475983607 posted

    IMHO, it does not make sense to use a radio button in this way.  You should set a default value or add another radio with a "none" label similar to a select element.  See the spec; https://html.spec.whatwg.org/multipage/input.html#attr-input-required

    Also, the radio buttons are missing the name attribute.  The name attribute is used to group radio buttons.  Plus this is a problem if the form is submitted.

    Thursday, September 26, 2019 7:34 PM
  • User-2132746437 posted

    They do have a name, I just noticed I left it out here by mistake. If there is only one set of radio buttons, it works, it's when the user adds more then one group on the form when they build it

    Thursday, September 26, 2019 7:37 PM
  • User475983607 posted

    Simple example

    <input type="radio" name="color" value="blue" required />Blue
    <input type="radio" name="color" value="red" />Red
    <span id="color" style="display:none">Please select a location</span>
    <hr />
    <input type="radio" name="beer" value="IPA" required />IPA
    <input type="radio" name="beer" value="Lager" />Lager
    <span id="beer" style="display:none">Please select a location</span>
    <hr />
    <input id="Button1" type="button" value="button" />
        <script>
    $('#Button1').click(function () {
    $('input, textarea, select').filter('[required]').each(function (index, value) {
    if ($(value).is(':radio')) {
    var group = $(value).attr('name');
    var groupVal = $(':radio[name="' + group + '"]:checked').val();
    //Debug
    console.log(groupVal);
    if (groupVal === undefined) {
    $('#' + group).show();
    }
    else {
    $('#' + group).hide();
    }
    }
    });
    });
    </script>

    Thursday, September 26, 2019 7:46 PM
  • User-2132746437 posted

    This works on a static form, not dynamic where it can have multiple radio buttons that may or may not be required and will need to show a message for each question not answered

    Thursday, September 26, 2019 8:04 PM
  • User-474980206 posted

    looking at your code its suspect. radio buttons groups should have the same name, you are creating unique names. you also are not including any value, so there is no post back value for the selected radio. I'd expect something more like:

    foreach(var i in Model.Locations)
    { 
         <label>
           <input type="radio" 
              id="Location-@Model.LocationId" 
              (@Model.Required ? "required" : "") 
              name="LocationId"
              value="@Model.LocationId" />  
           @i.Text
         </label>
    }
    <span class="error" data-for="Location" style="display:none">Please select a location</span>
    
    

    and a validation like:

    function radioValidate() {
        $(':radio')
            .toArray()
            .map(function(e) { return e.name})
            .reduce(function(a,c) {
               if (a.indexOf(c) < 0) 
                 a.push(c);
               return a;
            },[])
            .forEach(function(n) {
               $('span [data-for=' + n + ']')[$(':radio[name='+n+'][required]').length ? 'show' : 'hide']();
            });
    }

    Thursday, September 26, 2019 8:23 PM
  • User475983607 posted

    csharpcoder

    This works on a static form, not dynamic where it can have multiple radio buttons that may or may not be required and will need to show a message for each question not answered

    Your response is simply not correct.  While the solution is not elegant and not production, it will certainly work in a dynamic form.  All you have to do is populate the radio button name attribute and span id with the same value.  Very simple.   

    Thursday, September 26, 2019 8:54 PM