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 api.jquery.com/each — epascarello
– epascarello, Commented Aug 26, 2020 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
– Gladi, Commented Aug 26, 2020 at 15:56

Arbin Shrestha · Accepted Answer · 2020-08-26 15:44:26Z

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, 2020 at 15:44

Arbin Shrestha

1551 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Arbin Shrestha Over a year ago

would you describe the error? Read this: stackoverflow.com/questions/16211871/…

Arbin Shrestha Over a year ago

Also try using console.log or debugger; to pinpoint where the bug is.

Gladi Over a year ago

It seems like with that function validation for my html is not working. Nothing happens

Arbin Shrestha Over a year ago

Did you check the console for errors? I just laid the logic behind it, there may be some errors that i cannot check.

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related