How to check if at least one input is completed?

I have this sample:

link

CODE HTML:

<form class="add-patient">
  <fieldset style="display: block;">
          <label for="new_exam">New exam</label>
          <input type="text" name="new_exam" id="new_exam" value="">
  </fieldset>
  <fieldset style="display: block;">
          <label for="x_ray">X ray</label>
          <input type="text" name="x_ray" id="x_ray"  value="">
  </fieldset>
  <input type="button" class="btn btn-submit" onclick="sendForm();" value="Create report">
</form>  

CODE JS:

 function sendForm() {
        var status_form = false;
        $(".add-patient input").each(function(){
           if($(this).val() == ""){
             status_form = true;
           }
        });
        console.log(status_form);
        var createdBy = jQuery('#created_by').val();

        if( status_form )
        {
            alert('Fill at least one field');
        }else{
            alert("now it's ok");
        }
 }

I want to do a check ... if an input is complete when displaying the message "it; s ok" ... otherwise displaying another message probably means the code clearly what they want to do.

You can help me with a solution please?

Thanks in advance!

Answers 1

  • Use .filter to get the length of the input elements having value as ''

    Try this:

    function sendForm() {
      var elem = $(".add-patient input[type='text']");
      var count = elem.filter(function() {
        return !$(this).val();
      }).length;
      if (count == elem.length) {
        alert('Fill at least one field');
      } else {
        alert("now it's ok");
      }
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <form class="add-patient">
      <fieldset style="display: block;">
        <label for="new_exam">New exam</label>
        <input type="text" name="new_exam" id="new_exam" value="">
      </fieldset>
      <fieldset style="display: block;">
        <label for="x_ray">X ray</label>
        <input type="text" name="x_ray" id="x_ray" value="">
      </fieldset>
      <input type="button" class="btn btn-submit" onclick="sendForm();" value="Create report">
    </form>


Related Articles