jQuery .each through few text inputs instead of javascript .find function

Question

I want to make validation for my input text form, that user cannot go further unless all input forms will be completed. i want to make it through every input that even if first is completed, user needs to complete another 2 etc. but at this moment i am only able to make it through the first one and have no idea how to iterate it through every input text.

My html:

<div class="write-to-us">
                <div class="col-md-12 field">
                    <p>Write to us</p>
                </div>
                <div class="col-md-12 field">
                    <div class="my-form">
                        <label>Name</label>
                        <input  type="text" name="subject" class="my-text-input">
                        <div class="label-error">Write your Name</div>
                    </div> 
                </div>
                <div class="col-md-12 field">
                    <div class="my-form">
                        <label>Surname</label>
                        <input type="text" name="subject" class="my-text-input">
                        <div class="label-error">Write your surname</div>
                </div>
                </div>
                <div class="col-md-12 field">
                    <div class="my-form">
                        <label">Question</label>
                        <textarea type="text" name="subject" class="my-text-input"></textarea>
                    </div>
                </div>
                <div>
                    <button class="my-button">Check it</button>
                </div>
            </div>

And my js code for iteration:

myFunction: function() {
            var $formField = $('.write-to-us');
            if (!$formField.exists()) {
                return;
            }
            initValidation();
            function initValidation() {
                var errorMsg = $formField.find('.label-error');
                var button = $formField.find('.my-button');
                var input = $formField.find('input');
                var inputContainer = $formField.find('.my-form')
                button.click(function(event) {
                    if(!input.val().trim()) {
                        errorMsg.css('visibility', 'visible');
                        inputContainer.addClass('error');
                        event.preventDefault();
                    }
                });
        },

I guess that problem is with .find and should be some jQuery .each but i have no idea how to change it.

So loop over all the inputs. Unsure what issue you have using https://api.jquery.com/each/ — epascarello, Aug 26 '20 at 15:44
.exists is jQuery function. My issue is that i do not know how to implement it. Im trying to use .each, but everytime is not working — Gladi, Aug 26 '20 at 15:56

score 0 · Accepted Answer · answered Aug 26 '20 at 15:44

0

I would try doing something like this rather than find.

function initValidation() {
  $('.my-button').click(function(){
    $("input").each(function() {
      var element = $(this);
      if (element.val() == "") {
        element.closest('.label-error').css('visibility', 'visible');
        element.closest('.my-form').addClass('error');
      }
    });
  });
}

answered Aug 26 '20 at 15:44

Arbin Shrestha

155
1
7

would you describe the error? Read this: https://stackoverflow.com/questions/16211871/how-to-check-if-all-inputs-are-not-empty-with-jquery – Arbin Shrestha Aug 26 '20 at 15:58
Also try using console.log or debugger; to pinpoint where the bug is. – Arbin Shrestha Aug 26 '20 at 15:59
It seems like with that function validation for my html is not working. Nothing happens – Gladi Aug 26 '20 at 16:02
Did you check the console for errors? I just laid the logic behind it, there may be some errors that i cannot check. – Arbin Shrestha Aug 26 '20 at 16:15

jQuery .each through few text inputs instead of javascript .find function

1 Answers1