CODEWITHSUNDEEP
javascripthtmljquery
dedi wibisono
dedi wibisono

Reputation: 533

Validation input if using show hide jQuery

How do i validate if there is a div that uses display:none

$("input[name$='test']").click(function() {
  var test = $(this).val();

  $("div.desc").hide();
  $("#test" + test).show();
});

$(".check").click(function(){
    var name = $("#name").val();
  var add = $("#add").val();
  var hobby = $("#hobby").val();
  
  if( name == "" ){
    $("#name").css('border', '1px solid red');
    return false
  } else if ( add == "" ){
    $("#add").css('border', '1px solid red')
  } else if ( hobby == "" ){
    $("#hobby").css('border', '1px solid red')
  } else {
    alert('success');
    return true
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myRadio">
  <div class="condition">
    <input type="radio" name="test" checked="checked" value="Y" id="first" />
    <label for="first">First</label>
  </div>
  <div class="condition">
    <input type="radio" name="test" value="N" id="second" />
    <label for="second">Second</label>
  </div>
  <div class="condition">
    <input type="radio" name="test" value="YN" id="third" />
    <label for="third">Third</label>
  </div>
</div>

<div id="testY" class="desc">
  <label for="name">Name</label>
  <input type="text" id="name" />
</div>

<div id="testN" class="desc" style="display:none">
  <label for="add">Add</label>
  <input type="text" id="add" />
</div>

<div id="testYN" class="desc" style="display:none">
  <label for="hobby">Hobby</label>
  <input type="text" id="hobby" />
</div>
<br>
<button class="check">Check</button>

When I fill in the first content and click validation, it should issue a success alert because my goal is to validate the div is showing.

Any idea?

Thank you

Upvotes: 0

Views: 56

Answers (1)

Cuong Le Ngoc
Cuong Le Ngoc

Reputation: 11975

You can find the input need to check by checked radio value first then validate this input:

$("input[name$='test']").click(function() {
  var test = $(this).val();

  $("div.desc").hide();
  $("#test" + test).show();
});

$(".check").click(function(){
    let checked = $("input[name$='test']:checked").val();
    let input = $("#test" + checked).find('input');
    let val = input.val();
    if(!val){
      $(input).css('border', '1px solid red');
      return false
    }
    alert('success');
    return true
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myRadio">
  <div class="condition">
    <input type="radio" name="test" checked="checked" value="Y" id="first" />
    <label for="first">First</label>
  </div>
  <div class="condition">
    <input type="radio" name="test" value="N" id="second" />
    <label for="second">Second</label>
  </div>
  <div class="condition">
    <input type="radio" name="test" value="YN" id="third" />
    <label for="third">Third</label>
  </div>
</div>

<div id="testY" class="desc">
  <label for="name">Name</label>
  <input type="text" id="name" />
</div>

<div id="testN" class="desc" style="display:none">
  <label for="add">Add</label>
  <input type="text" id="add" />
</div>

<div id="testYN" class="desc" style="display:none">
  <label for="hobby">Hobby</label>
  <input type="text" id="hobby" />
</div>
<br>
<button class="check">Check</button>

Upvotes: 1

Related Questions