CODEWITHSUNDEEP
javascripthtmljqueryformsvalidation
Stacks Queue
Stacks Queue

Reputation: 1132

Validate required radiobutton on .validate() rules jquery function

I have radio button on my form and I wan't to required validate it but I don't know how validate it on rules. It will show error field if not checked Thank you

$("[name='formName']").validate({
        rules: {
            radName: {}
        }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>

 <form name="formName" method="post" action="#">
    <div>
      <input type="radio" name="radNamae" value="1">
      <label for="rdb-illustration">Label 1</label>
      <input type="radio" name="radNamae" value="2">
      <label for="rdb-illustration">Label 2</label>
      <input type="radio" name="radNamae" value="3">
      <label for="rdb-illustration">Label 3</label>
    </div>
    <input type="submit" id="btn-submit" class="btn-gen" value="Submit">
 </form>

Upvotes: 0

Views: 49

Answers (1)

Kinglish
Kinglish

Reputation: 23654

$("[name='formName']").validate({
  rules: {
    radName: {
      required: true
    }
  },
    errorPlacement: function (error, element) {
    var name    = $(element).attr("name");
    var obj    = $("#" + name + "_validate");
        error.appendTo(obj);
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>

<form name="formName" method="post" action="#">
  <div>
    <input type="radio" name="radName" value="1">
    <label for="rdb-illustration">Label 1</label>
    <input type="radio" name="radName" value="2">
    <label for="rdb-illustration">Label 2</label>
    <input type="radio" name="radName" value="3">
    <label for="rdb-illustration">Label 3</label>
  </div>
   <div id='radName_validate'></div>
  <input type="submit" id="btn-submit" class="btn-gen" value="Submit">
</form>

Upvotes: 1

Related Questions