Mark radio/checkbox buttons required

Question

I would like to add some rules to the following checkboxes:

<form action="{% url 'payment' item.slug %}" method="POST">

    {% csrf_token %}
    <label class="radio-inline">
        <h5> <input type="checkbox" class="radioCheck" required name="half_price" id='c01'  value="{{item.half_price}}" onclick="check(this);" style=" margin-top: 20px; "{% if item.half_price %} {% else %} disabled {% endif %} > Half: ₹ {{item.half_price}} /- </h5>
        <span class="checkmark"></span>
    </label>

    <label class="radio-inline">
        <h5> <input type="checkbox" class="radioCheck" required name="full_price" id='c02' value={{item.full_price}} onclick="check(this);" {% if item.full_price %} {% else %} disabled {% endif %}>  Full : ₹ {{item.full_price}} /- </h5>
        <span class="checkmark"></span>
    </label>
    <input style="margin-left: 10px;" type="submit" class="button" value="ADD">
 </form>

If one of my items isn't marked as half price, the checkbox is disabled and webpage will continue to ask for checkbox as it is required.
now suppose I remove 'required' from half price and my product has half price and I check the half-price checkbox and click on "add button", it says full price is mandatory.
If I remove required from both, and user doesn't click on any checkbox and clicks on submit button, I get no value in the backend.

Of note, I have jQuery in which restricts the user to only select one checkbox.

Why is your input wrapped in a heading tag? Why is your input wrapped inside the label tag? This markup is on another level... — Sean Stopnik, Mar 03 '21 at 18:00
Try to avoid fighting HTML if you can, it really sounds like you want a [radio button group](https://stackoverflow.com/a/8287947/231316). — Chris Haas, Mar 03 '21 at 18:04

score 1 · Answer 1 · answered Mar 03 '21 at 18:15

You can write a function on input click to check you checkbox validation (If you don't want to change your html).

var validateBeforePost = function(){
  var chkCount =  document.querySelectorAll('input.radioCheck[type="checkbox"]:checked');
  if(chkCount.length == 0 || chkCount.length > 1 ){
    alert('Select single valid price'); 
    return false;
  }
  return true;
}

//check  
function check(){}

<form>
<label class="radio-inline">
                    <h5> <input type="checkbox" class="radioCheck"  name="half_price" id='c01'  value="{{item.half_price}}" onclick="check(this);" style=" margin-top: 20px; "> Half: ₹ {{item.half_price}} /- </h5>
                    <span class="checkmark"></span>
                </label>
                
                <label class="radio-inline">
                    <h5> <input type="checkbox" class="radioCheck"  name="full_price" id='c02' value={{item.full_price}} onclick="check(this);" >  Full : ₹ {{item.full_price}} /- </h5>
                    <span class="checkmark"></span>
                </label>
                <input style="margin-left: 10px;" type="submit" class="button" onclick="return validateBeforePost();"  value="ADD">
 </form>

thank you, this should work for me. thanks I really appreciated that sir. and thanks for understanding my question really well. — faijan memon, Mar 04 '21 at 06:43

joshuaprakasam · Answer 2 · 2021-03-06T15:28:31.650

Why not make it required only if the half_price is available.

<input type="checkbox" name="half_price" value="{{item.half_price}}"
  {% if item.half_price %} required {% else %}  disabled {% endif %} 
>

Similarly for full_price

<input type="checkbox" name="full_price" value="{{item.full_price}}"
  {% if item.full_price %} required {% else %}  disabled {% endif %} 
>

EDIT:

Changes need to be done.

    <label class="radio-inline">
        <h5> <input type="checkbox" class="radioCheck" name="half_price" id='c01'  value="{{item.half_price}}" onclick="check(this);" style="margin-top: 20px;" {% if item.half_price %}required{% else %}disabled{% endif %} > Half: ₹ {{item.half_price}}/- </h5>
        <span class="checkmark"></span>
    </label>

    <label class="radio-inline">
        <h5> <input type="checkbox" class="radioCheck" name="full_price" id='c02' value={{item.full_price}} onclick="check(this);" {% if item.full_price %}required{% else %}disabled{% endif %} >  Full : ₹ {{item.full_price}}/- </h5>
        <span class="checkmark"></span>
    </label>
    <input style="margin-left: 10px;" type="submit" class="button" value="ADD">

With data

{
  item: {
    half_price: 40,
    full_price: 80 
  }
}

Will translate to

    <label class="radio-inline">
        <h5> <input type="checkbox" class="radioCheck" name="half_price" id='c01'  value="40" onclick="check(this);" style="margin-top: 20px;" required > Half: ₹ 40/- </h5>
        <span class="checkmark"></span>
    </label>

    <label class="radio-inline">
        <h5> <input type="checkbox" class="radioCheck" name="full_price" id='c02' value=80 onclick="check(this);" required >  Full : ₹ 80/- </h5>
        <span class="checkmark"></span>
    </label>
    <input style="margin-left: 10px;" type="submit" class="button" value="ADD">

For Data

{
  item: {
    half_price: 40
  }
}

will translate to

    <label class="radio-inline">
        <h5> <input type="checkbox" class="radioCheck" name="half_price" id='c01'  value="40" onclick="check(this);" style="margin-top: 20px;" required > Half: ₹ 40/- </h5>
        <span class="checkmark"></span>
    </label>

    <label class="radio-inline">
        <h5> <input type="checkbox" class="radioCheck" name="full_price" id='c02' value= onclick="check(this);" disabled >  Full : ₹ /- </h5>
        <span class="checkmark"></span>
    </label>
    <input style="margin-left: 10px;" type="submit" class="button" value="ADD">

For Data

{
  item: {}
}

Will translate to

    <label class="radio-inline">
        <h5> <input type="checkbox" class="radioCheck" name="half_price" id='c01'  value="" onclick="check(this);" style="margin-top: 20px;" disabled > Half: ₹ /- </h5>
        <span class="checkmark"></span>
    </label>

    <label class="radio-inline">
        <h5> <input type="checkbox" class="radioCheck" name="full_price" id='c02' value= onclick="check(this);" disabled >  Full : ₹ /- </h5>
        <span class="checkmark"></span>
    </label>
    <input style="margin-left: 10px;" type="submit" class="button" value="ADD">

UPDATE: Resolving the question in comments. If you only want the values, then these are the changes need to be done.

    <label class="radio-inline">
        <h5> <input type="radio" class="radioCheck" name="price" id='c01'  value="{{item.half_price}}" onclick="check(this);" style="margin-top: 20px;" {% if item.half_price %}required{% else %}disabled{% endif %} > Half: ₹ {{item.half_price}}/- </h5>
        <span class="checkmark"></span>
    </label>

    <label class="radio-inline">
        <h5> <input type="radio" class="radioCheck" name="price" id='c02' value={{item.full_price}} onclick="check(this);" {% if item.full_price %}required{% else %}disabled{% endif %} >  Full : ₹ {{item.full_price}}/- </h5>
        <span class="checkmark"></span>
    </label>
    <input style="margin-left: 10px;" type="submit" class="button" value="ADD">

For Data

{
  item: {
    "half_price": 80,
    "full_price": 160
  }
}

Will translate to

    <label class="radio-inline">
        <h5> <input type="radio" class="radioCheck" name="price" id='c01'  value="80" onclick="check(this);" style="margin-top: 20px;" required > Half: ₹ 80/- </h5>
        <span class="checkmark"></span>
    </label>

    <label class="radio-inline">
        <h5> <input type="radio" class="radioCheck" name="price" id='c02' value=160 onclick="check(this);" required >  Full : ₹ 160/- </h5>
        <span class="checkmark"></span>
    </label>
    <input style="margin-left: 10px;" type="submit" class="button" value="ADD">

if item has both half and full price then sir? both checkbox will be required. — faijan memon, Mar 04 '21 at 06:39
not sure sir yet, like what if I just want to add just half one to my cart then? it will be asking me for full as well right?? — faijan memon, Mar 06 '21 at 14:59
i want only one item to be added at time, and the need to make it required is b'caz I am taking those values in backend , and if user don't selects any value then I confront with an error, so i have to make it required so that after he selects then only he can go further, — faijan memon, Mar 06 '21 at 15:06
Did you try this solution ??. @faijanmemon It will depend upon your data in "item" key — joshuaprakasam, Mar 06 '21 at 15:08
yes sir i tried and asking me to check another field , bcaz it is required. i am uploading an image of your current solution sir , please check it. — faijan memon, Mar 06 '21 at 15:12
Ok got the problem, then one solution is to use radio button with same `name` attribute like `price` and with `value` as `full_price` and `half_price` to achieve it. — joshuaprakasam, Mar 06 '21 at 15:21
Updated the answer in the UPDATE of the answer. Check whether this works for you — joshuaprakasam, Mar 06 '21 at 15:29

score 0 · Answer 3 · answered Mar 03 '21 at 18:01

First of, you shouldn't require jQuery to keep one checkbox selected at a time. Keeping same 'name' attribute for both of the checkboxes will work. When you keep the name attr same for the checkboxes then add 'checked' attribute to your 'Full Price' checbox so that on page load it is always selected. User will have option to check the 'Half Price' checkbox if it was not disabled by your condition.

Mark radio/checkbox buttons required

3 Answers3