Call if statement every time an input is changed

Question

I want to make it so that in my form the user cannot click the submit button until every field has an option selected. I originally tried this with a while loop and it created an infinite loop. I converted it to an if statement and added code to call the if statement every time something on the form is changed, but still the submit button never becomes clickable.

DEMO

if(($('input[type=text]').val() === '') || (!($('input[name=class]').is(':checked'))) || (!($('input[name=race]').is(':checked')))) {
    $(' input[type=submit]').css('pointer-events', 'none');
}
else{
    $(' input[type=submit]').css('pointer-events', 'auto');
}

$('input[name=user]', 'input[name=race]', 'input[name=class]').change(function(){
    if(($('input[type=text]').val() === '') || (!($('input[name=class]').is(':checked'))) || (!($('input[name=race]').is(':checked')))) {
        $(' input[type=submit]').css('pointer-events', 'none');
    }
    else{
        $(' input[type=submit]').css('pointer-events', 'auto');
    }
});

@Rayon edited question with else condition, still does not work — Shniper, Apr 27 '16 at 06:01
check at this [link](http://stackoverflow.com/questions/5614399/disabling-submit-button-until-all-fields-have-values) here you will find solution. — Iqbal Pasha, Apr 27 '16 at 06:05
[shorter way](https://jsfiddle.net/KartikeyaKhosla/det87606/1/) — Kartikeya Khosla, Apr 27 '16 at 06:10
@KartikeyaKhosla All good answers. Kartik you should submit your comment as an answer so I can accept it, but I am wondering what the .length in your example is used for? — Shniper, Apr 27 '16 at 06:14
`.length` in my fiddle will give you checked checkboxes count.if count is `0` then `!0` will give `true`...@Shniper — Kartikeya Khosla, Apr 27 '16 at 06:20

Hammer · Answer 1 · 2016-04-27T06:05:26.693

1

why not use required attribute ? Here is a link http://www.w3schools.com/tags/att_input_required.asp http://www.w3schools.com/tags/att_select_required.asp

If you want more sophisticated validation, take a look at this https://jqueryvalidation.org/

edited Apr 27 '16 at 06:05

answered Apr 27 '16 at 06:01

Hammer

8,538
12
44
75

these sites cannot be reached. – Shniper Apr 27 '16 at 06:03
is there a way like this to require a selection for radio inputs? – Shniper Apr 27 '16 at 06:14
try this link http://stackoverflow.com/questions/8287779/html5-how-to-use-the-required-attribute-with-a-radio-input-field – Hammer Apr 27 '16 at 06:16
u should use the built-in support, unless you have complicated validation rules, then try use javascript or js plugin – Hammer Apr 27 '16 at 06:18

score 1 · Answer 2 · answered Apr 27 '16 at 06:07

Multiple selectors should we wrapped in a quote and separated by comma(,)

jQuery( "selector1, selector2, selectorN" )

Note: Also wrap value of the attribute in quotes(")

jQuery( "[attribute='value']" )

if (($('input[type="text"]').val() === '') || (!($('input[name="class"]').is(':checked'))) || (!($('input[name="race"]').is(':checked')))) {
  $(' input[type="submit"]').css('pointer-events', 'none');
} else {
  $(' input[type="submit"]').css('pointer-events', '');
}
$('input[name="user"],input[name="race"],input[name="class"]').change(function() {
  if (($('input[type="text"]').val() === '') || (!($('input[name="class"]').is(':checked'))) || (!($('input[name="race"]').is(':checked')))) {
    $(' input[type="submit"]').css('pointer-events', 'none');
  } else {
    $(' input[type="submit"]').css('pointer-events', '');
  }
});

#newPlayer {
  position: relative;
  top: 20px;
  color: #8b0909;
  background-color: rgba(0, 0, 0, .3);
  width: 350px;
  margin: auto;
  height: 275px;
  border-radius: 5px;
  text-shadow: 1px 1px 1px black;
}
#newPlayer h3 {
  font-size: 20px;
  font-family: 'Droid Sans', sans-serif;
  font-weight: 700;
  padding-bottom: 5px;
}
#newPlayer p {
  max-width: 275px;
  margin: auto;
  margin-top: 5px;
  color: #c10606;
  font-size: 14px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}
#newPlayer input[type=submit] {
  color: black;
  border-radius: 5px;
  font-family: 'Droid Sans', sans-serif;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="newPlayer">
  <h3>Username:</h3>
  <input type="text" name="user" />
  <br>
  <h3>Please Choose a Class:</h3>
  <input type="radio" name="class" value="archer" />Archer
  <input type="radio" name="class" value="mage" />Mage
  <input type="radio" name="class" value="warrior" />Warrior
  <br>
  <h3>Please Choose a Race:</h3>
  <input type="radio" name="race" value="Orc" />Orc
  <input type="radio" name="race" value="Elf" />Elf
  <input type="radio" name="race" value="Human" />Human
  <input type="radio" name="race" value="Worg" />Worg
  <br>
  <input type="submit" value="Submit" />
  <p id="descript"></p>
</form>

score 1 · Accepted Answer · answered Apr 27 '16 at 06:24

A better and shorter way to accomplish your task.

$('form#newPlayer').submit(function(){ // bind form submit event
   if($('input:text').val() == "" || !$('input[name="class"]:checked').length || !$('input[name="race"]:checked').length)
   {
     alert("all fields required");
     return false; // prevent form submission.
   }
});

DEMO

score 0 · Answer 4 · answered Apr 27 '16 at 06:05

Write validate function which return true if all conditions are met or false if not. Then on click run the function and if it returns true then do form.submit()

function validateData() {
  
  var result = true;
  
  if(!$('.yourinput1').val()) {
    result = false;
  }
    
   if(!$('.yourinput2').val()) {
    result = false;
  }
     
  
  return result;
  
  }



$('#yourbutton').click(function(e){
  
  e.preventDefault();

  if(validateData()) {
    
    $('#yourForm').submit();
  
  }


});

score 0 · Answer 5 · answered Apr 27 '16 at 06:56

From problem statement , it seems you are looking to disable the submit during initial page load and also if all fields are not selected & enable it only if all fields are selected.

So if it the case you need to initially disable submit button.

For that you can use disabled attribute.

Here is the change I did

HTML

<input type="submit" value="Submit" disabled="true" class = "disableSubmit"/>

CSS

.disableSubmit{
  cursor:no-drop; // this will let user know button cannot be selected
}

JS

// function which will validate every field
function _validateFields(){
  var _textField = $('input[type=text]').val();
  var _secondField = $('input[name=class]').is(":checked");
  var _thirdField = $('input[name=race]').is(":checked");
  if((_textField === undefined || _textField ==="") || _secondField == false || _thirdField == false){
    return false;
   } 
  else{
    return true;
  }
}


$('input[name="user"],input[name="race"],input[name="class"]').on('change keyup',function() {
  if(_validateFields()){
    $(' input[type="submit"]').attr("disabled",false).removeClass('disableSubmit');
  }
  else{
   $('input[type="submit"]').attr("disabled",true).addClass('disableSubmit');
  }
})

Plunker for demo

Call if statement every time an input is changed

5 Answers5