CODEWITHSUNDEEP
javascriptjquery
Yagami Light
Yagami Light

Reputation: 1796

Disable and enable a button by form validation with jquery

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 ?!?

Upvotes: 0

Views: 119

Answers (3)

J&#233;r&#244;me Teisseire
J&#233;r&#244;me Teisseire

Reputation: 1548

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;  
    }  
}

Upvotes: 0

Rahul Pawar
Rahul Pawar

Reputation: 1046

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);
        }
    });

Upvotes: 0

Iceman
Iceman

Reputation: 6145

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

Upvotes: 1

Related Questions