Disable and enable a button by form validation with jquery

Question

I have a div that contain required element

<div id="test">
  <input type="text" required/>
  ...
  </div>
    <input type="button" name="previous"
    class="previous action-button-previous" value="Previous" /> <input
    type="button" name="next" class="next action-button"
    value="Next" />

  ...

I want to make the Nextbutton enabled or disabled by form validation (if all required field is OK)

I've used this method

<script>
  function validateForm() {
    var searchEles = document.getElementById('test')
      .getElementsByTagName('input');
    var searchEles2 = document.getElementById('test')
      .getElementsByTagName('select');

    for (var i = 0; i < searchEles.length; i++) {
      if (searchEles[i].getAttribute("required") != null) {
        alert("il est required "); //He is required
      } else {
        alert("il est n'est pas required "); //He is not
      }
    }
    for (var i = 0; i < searchEles2.length; i++) {

      if (searchEles2[i].getAttribute("required") != null) {
        alert("il est required ");
      } else {
        alert("il est n'est pas required ");
      }
    }
  }
</script>

Is it possible to use it as disabled function ?!?

what does `document.getElementById('test').getElementsByTagName('input')` mean? — Iceman, Sep 30 '18 at 14:06
it's getting all the input contained in `div text` (I am using innerHtml to insert input inside the `test div` ) — Yagami Light, Sep 30 '18 at 14:08
btw, if you do have jquery loaded you can do this with a selector and iterate over using each....looks cleaner...not necessarily better in any way...but just saying :) — Iceman, Sep 30 '18 at 14:12
an example will help me to understand (cleaner is always better) — Yagami Light, Sep 30 '18 at 14:13
`$('#test>input').each(function(){ })` ... the function is run for every input tag inside test. the input is available inside the function as `$(this)` — Iceman, Sep 30 '18 at 14:19
could you tell me what is your intention with line: `.getAttribute("required")!= null` .... i'm don't thinks its doing what you think it does...:) — Iceman, Sep 30 '18 at 14:22
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/181018/discussion-between-iceman-and-yagami-light). — Iceman, Sep 30 '18 at 14:25

Iceman · Accepted Answer · 2018-09-30T14:05:33.167

1

There are many ways.

1) Essentially a simple strategy would be:

make next button disabled to start with
making use of change function to capture the change events from your form, and run your validator function. If valid => enable your next button

PS: if you don't have jquery loaded, you could always use vanilla JS to capture the event. you really don't need jQuery for this.

2) jQuery Validation Plugin

Its a solution for exactly this purpose, and since you have the jquery tag, might be an option you can consider. You can try this SO post for a simple implementation

edited Sep 30 '18 at 14:05

answered Sep 30 '18 at 13:56

Iceman

6,035
2
23
34

every time i edit an input i will check if i enable or disable the button nice idea – Yagami Light Sep 30 '18 at 14:00
that is correct, and is essentially the crux of almost any solution you are going to come up with. – Iceman Sep 30 '18 at 14:01
and as personnal opinion which solution will you take ?!? – Yagami Light Sep 30 '18 at 14:02
hmm..if its just this one case , option1 means no new dependency to add. which means lesser code for the user to download...which means faster load time :) – Iceman Sep 30 '18 at 14:03
thank you for the answer i will try the two solutions and give you a feedback about it – Yagami Light Sep 30 '18 at 14:05

score 0 · Answer 2 · answered Sep 30 '18 at 14:08

This is how I done :

<div id="steps-uid-1-p-1">
  <input type="text" class="one_d_fields" name="fname" required/>
  <input type="text" class="one_d_fields" name="lname" required/>
  ...
  </div>
    <input type="button" name="previous"
    class="previous action-button-previous " value="Previous" /> 
   <input type="button" name="next" class="next action-button next_btn" value="Next" />
</div>

My script look like below :

$(".one_d_fields").on("keyup change", function () {
        var isValid = true;
        $($(this).closest("#steps-uid-1-p-1").find("input[type=text],select")).each(function () {
            if ($.trim($(this).val()) == '') {
                isValid = false;
            }
        });
        if (isValid == false) {
            $(".next_btn").attr("disabled",true);
             //or
            $(".next_btn").prop("disabled",true);

        } else {
            $(".next_btn").attr("disabled",false);
             //or
            $(".next_btn").prop("disabled",false);
        }
    });

Jérôme Teisseire · Answer 3 · 2018-09-30T14:17:15.660

add a boolean `isOkay' to test your condition and desactivate button, without jquery:

function validateForm() {
  // New boolean var
  var isOkay = true;

  var searchEles = document.getElementById('test')
            .getElementsByTagName('input');
  var searchEles2 = document.getElementById('test')
            .getElementsByTagName('select');

    for (var i = 0; i < searchEles.length; i++) {
        if (searchEles[i].getAttribute("required") != null) {
            alert("il est required "); //He is required
        } else {
            alert("il est n'est pas required ");//He is not
           // Condition :false
           isOkay = false;
        }
    }
    for (var i = 0; i < searchEles2.length; i++) {

        if (searchEles2[i].getAttribute("required") != null) {
            alert("il est required ");
        } else {
            alert("il est n'est pas required ");
            isOkay = false;
        }
    } 

    // Enable/Disable button
    if(isOkay){
      // disable
      document.getElementsByName("next")[0].disabled = true; 
    }else{
       // enable
       document.getElementsByName("next")[0].disabled = false;  
    }  
}

how will you call the validate function...i think thats the main issue here. — Iceman, Sep 30 '18 at 14:20
@Iceman it's partial code, i just answer to `Is it possible to use it as disabled function ?!? ` — Jérôme Teisseire, Sep 30 '18 at 15:57

Disable and enable a button by form validation with jquery

3 Answers3