Get name of all fields with the required tag

Asked

Viewed 510 times

0

I want to get the name of all fields with the tag required and test one by one, if any of them are empty, enter the name in an array. This question resembles some things with this old question my, but the context is different.

function myFunction() {
  var inputs = [];

  jQuery('input[required]:visible,select[required]:visible').each(function() {
    jQuery(this).removeClass('erro');
    if (jQuery(this)[0].value == "" || jQuery(this)[0].value == undefined || jQuery(this).prop('checked') == false) {
      jQuery(this).addClass('erro');
      inputs.push(jQuery(this)[0].name);
    }
  });
  console.log(inputs);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="option" value="1" required/>
<input type="radio" name="option" value="2" required />
<input type="radio" name="teste" value="3" required />
<input type="radio" name="option" value="4" required />
<input type="radio" name="option" value="5" required style="display:none">
<input type="radio" name="option" value="6" required disabled>
<input type="text" name="teste1" required>
<input type="text" name="teste2" required>
<select name="teste5" required>
  <option></option>
  <option val="1">a</option>
  <option val="2">b</option>
  <option val="3">c</option>
</select>
<input type="teste" name="teste6" required>
<button onclick="myFunction()">Click me</button>

I tried something like: jQuery(this)[0].checked=="" but it didn’t work very well

javascript jquery html

1 answer

2

I don’t know if I understand you very well, but that’s what you’re looking for?

function myFunction() {
  var inputs = [];

  jQuery('[required]').each(function() {
    //console.log(this);
    jQuery(this).removeClass('erro');
    if (!jQuery(this).val()) {
      console.log("entrou");
      jQuery(this).addClass('erro');
      inputs.push(jQuery(this).attr('name'));
    }
  });
  console.log(inputs);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="visa" type="radio" name="option" value="visa" required/>
<input id="visa" type="radio" name="option" value="visa" required />
<input id="visa" type="radio" name="teste" value="visa" required />
<input id="visa" type="radio" name="option" value="visa" required />
<input id="visa" type="radio" name="option" value="visa" required style="display:none">
<input id="visa" type="radio" name="option" value="visa" required disabled>
<input type="teste" name="teste1" required>
<input type="teste" name="teste2" required>
<select name="teste5" required>
  <option></option>
  <option val="1">a</option>
  <option val="2">b</option>
  <option val="3">c</option>
</select>
<input type="teste" name="teste6" required>

<button onclick="myFunction()">Click me</button>

  • If so, please let me know and explain the changes. If not, explain better what you are looking for and I will edit my answer.

  • I managed to find a solution rs, I tried to explain in the question but I think it was unclear

  • @Marcelobonifazio I didn’t really understand very well what you’re looking for. But if you found an answer, post it that will surely help other people. xD

  • Yes, I will try to structure the question better, and finish tidying up the answer, then I put :)

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.