Shopify Question posted in
The Shopify help center can be found here.

How made my function affect the DOM Jquery? – Shopify

Hi, I have written a webSite on Shopify and I want to disable my button and add some customs CSS class to my input if the input is not filled on my 4steps form.
I’ve written a piece of code with what I remember from Jquery it’s been a long time since I’ve used this language.

This is the jQuery funct:

$(document).ready(function () {
  
  $("#submitButton, #btn0, #btn1, #btn2").click(function () {
    ValidateForm();
  });


  function ValidateForm() {

    var invalidForm = false;
    var index = 0;
    var button = document.querySelector("#submitButton, #btn0, #btn1, #btn2");

    $("#form__form--stepForm-" + index + "input.form__form--input").each(function () {
      if ($(this).val() < 1) {
        invalidForm = true;
      }
    });

    if (invalidForm === true) {
      button.disabled = true;
      $("input.form__form--input").removeClass(".form__form--validation").addClass(".form__form--validationInvalid");

    } else if (invalidForm === false) {
      button.disabled = false;
      $("input.form__form--input").removeClass(".form__form--validation").addClass(".form__form--validationValid");
      index++;
    }
  }
});

I made all my inputs like this one:

<div class="3/3 3/3--thumb 3/3--pocket grid__cell--center">
    <input type="text" id="form__form--lastnameInput" name="contact[lastname]"
    class="form__form--input form__form--validation" placeholder="Nom *" value required>
    <div class="form__form--invalidFeedback">Veuillez saisir votre nom.</div>
</div>

And the button like this:

<button id="btn0" type="button" class="button button--primary form__form--button"
    aria-label="SUIVANT" title="SUIVANT">
    {% include 'icon-arrow-slider' %}
    SUIVANT
</button>

As you can see it’s a very basic function for the jquery and a classic HTML input but it doesn’t block the button and doesn’t make the CSS work either. I’d like to understand why and how to make it work for this site and the following thanks for your time and help, take care of yourself!

Tags:

2

Answers


  1. 0

    Your value checking is always false, consider using length function instead:

     if ($(this).val().length < 1) {
    invalidForm = true;
  }

    You may also need to prevent default behavior of your form. Instead of listening to the click, listen the submit event:

    $("#form__form--contactWrapper").on('submit',function (e) {
    e.preventDefault(); //the form is not sent yet
    ValidateForm();
  });

    Then at the end of your function ValidateForm you can send it when you have all your needed validations done, like this:

    $("#form__form--contactWrapper").submit();
    Login or Signup to reply.
  2. 0

    I have get rid of all error by doing a big refacto of my code i share you my code

    $(document).ready(function () {
    $('[to-step]').on('click', function () {
        var to_step = $(this).attr("to-step");
        var current_step = $(this).closest('[stepform]').attr("stepform");
        var form_error = false;
        if (!($(this).hasClass("previous-btn"))) {
            $('[stepform="' + current_step + '"] .form__form--input').each(function () {
                if ($(this).val().length == 0) {
                    $(this).addClass("input--error");
                    form_error = true;
                } else {
                    $(this).removeClass("input--error");
                }
            });
        }
        if (!form_error) {
            if (current_step < 4 || $(this).hasClass("previous-btn")) {
                $('[stepform').hide();
                $('[stepform="' + to_step + '"]').fadeIn();
            }
        }
    });
    $("#submitButton").on("click", function (event) {
        event.preventDefault();
        if ($("#form__form--radioRgpd:checked").length == 1) {
            $("#contact_form").submit();
        } else {
            $(".form__form--radioRgpdLabel").addClass("label--error");
        }
    });
});

    this piece of code gonna check at what step i am in my 4 ‘pages’ form and add the proper css class if the form is bad filled or not filled.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search