How to use nested if else in Jquery Javascript

Question

What I'm trying to do here is have a form validation. I have 3 element here, a,b and c.

What I need to do is:

Edit: Just to correct my question

If a != 0 || a != '' validation_holder = 1;

else, if var a has value greater than zero, compare the value of b and c, c should not greater than b

if no errors submit the form.

I'm trying to do this in nested if else.

And here's what I have right now. http://jsfiddle.net/jWL9s/2

Any help will appreciate.

<form action="" method="post" id="register_form"  name="register_form">
PO<input type="text" id="a" value="0"/><br/>
Remain<input type="text" id="b" value="10"/><br/>
PR<input type="text" id="c" value="5"/><br/>
<span class="alert"></span>
<input name="edt_submit" type="submit" value="Edit">
</form>

jQuery(function($) {
var validation_holder;

$("form#register_form input[name='edt_submit']").click(function() {

var validation_holder = 0;

    var a           = $("form#register_form input[id='a']").val();
    var b           = $("form#register_form input[id='b']").val();
    var c           = $("form#register_form input[id='c']").val();

    if(a != 0 && a != '') {
        $("span.alert").html("You Cannot edit").addClass('validate');
        validation_holder = 1;
    } else {
    if( b > c ) {
        $("span.alert").html("Value is Greater than").addClass('validate');
        validation_holder = 1;
        } else {
        $("span.alert").html("");
        }
    }

    if(validation_holder == 1) { // if have a field is blank, return false
        $("p.validate_msg").slideDown("fast");
        return false;
    }  validation_holder = 0; // else return true
    /* validation End */    
}); // click End 

}); // jQuery End

$("form#register_form input[id='a']") is hugely less efficient than: $('#a'). — RobG
– RobG, Commented Jul 30, 2014 at 2:41

Sarbbottam · Accepted Answer · 2014-07-30 03:14:35Z

1

By any chance are you looking for this solution (updated fiddle)

Markup:

<form id="register-form">
    <label for="a">PO</label>
    <input type="text" id="a" value="0"/>

    <label for="b">Remain</label>
    <input type="text" id="b" value="10"/>

    <label for="c">PR</label>
    <input type="text" id="c" value="5"/>

    <p id="message"></p>

    <input type="submit" value="Edit Summary">
</form>

JavaScript:

var validate = function(e) {
  e.stopPropagation();
  e.preventDefault();
  var a = $('#a').val();
  var b = parseInt($('#b').val());
  var c = parseInt($('#c').val());
  var message = $('#message');
  if(a === '' ||  parseInt(a) === 0) {
    message.html('You cannot edit.');
  } else {
    if( c > b ) {
      message.html('Value is Greater.');
    } else {
      message.html('');
      this.submit();
    }
  }
}
$('#register-form').on('submit', validate);

edited Jul 30, 2014 at 3:14

answered Jul 30, 2014 at 2:55

Sarbbottam

5,6054 gold badges33 silver badges41 bronze badges

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

4 Comments

RobG Over a year ago

(a === '' || parseInt(a) === 0) can be a == 0. And none of the form controls will be submitted since none have names.

Sarbbottam Over a year ago

@RobG You are correct but the intention of the code is to demo the logic what OP has been asking for.

Whymarrh Over a year ago

@sarbbottam You may want to add a radix to the parseInt calls (for posterity)

RobG Over a year ago

@sarbbottam—it helps to answer issues in the OP even if a question isn't asked about them specifically. It saves the OP asking yet another question and "it doesn't work" responses.

RobG · Accepted Answer · 2014-07-30 03:01:38Z

Note that a, b and c are strings since form control values are strings.

If a == 0 or a =='' validate and show the message 'You cannot edit the QTY'

The test seems fine, as == will convert the string value of a to a number since the other value is a number per the Abstract Equality Comparison Algorithm, so if a is either zero, an empty string or a string of only white space, the following statement is executed.

If a != 0 || a != '' , compare the value of c > b validate and show the message 'Value is Greater than'

That seems fine, except you don't need the second test as it's already covered by a != 0 since an empty string or one containing only whitespace is converted to 0 per the algorithm above.

Note that form controls must have a name to be successful, an ID is suitable.

The expression: $("form#register_form input[id='a']").val() can be $('#a').val().

Collectives™ on Stack Overflow

How to use nested if else in Jquery Javascript

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related