How to check for empty values on two fields then prompt user of error using javascript

Question

Hello guys,

I hope I can explain this right I have two input fields that require a price to be entered into them in order for donation to go through and submit.

The problem that I am having is that I would like the validation process check to see if one of the two fields has a value if so then proceed to submit. If both fields are empty then alert.

This is what I have in place now after adding some of the input i received earlier today:

 function validate_required(field,alerttxt)
{ 
with (field) 
{ 
    if (value==null||value=="") 
    {
        alert(alerttxt); return false;
    } 
    else 
    {
        return true;
    } 
} 
}

function validate_form(thisform)
{
with (thisform)
{

    if (validate_required(billing_name_first,"You must enter your first name to donate")==false)
    {billing_name_first.focus();return false;}

    else if (validate_required(billing_name_last,"You must enter your last name to donate")==false)
    {billing_name_last.focus();return false;}

    else if (validate_required(billing_address_street1,"You must enter your billing street address to donate")==false)
    {billing_address_street1.focus();return false;}

    else if (validate_required(billing_address_city,"You must enter your billing address city to donate")==false)
    {billing_address_city.focus();return false;}

    else if (validate_required(billing_address_state,"You must enter your billing address state to donate")==false)
    {billing_address_state.focus();return false;}

    else if (validate_required(billing_address_zip,"You must enter your billing address zip code to donate")==false)
    {billing_address_zip.focus();return false;}

    else if (validate_required(billing_address_country,"You must enter your billing address country to donate")==false)
    {billing_address_country.focus();return false;}

    else if (validate_required(donor_email,"You must enter your email address to donate")==false)
    {donor_email.focus();return false;}

    else if (validate_required(card_number,"You must enter your credit card number to donate")==false)
    {card_number.focus();return false;}

    else if (validate_required(card_cvv,"You must enter your credit card security code to donate")==false)
    {card_cvv.focus();return false;}

    else if (validate_required(input1,"Need to enter a donation amount to continue")==false && validate_required(input2, "Need to enter a donation amount to continue")==false) 
    {
        input1.focus();
        return false;
    }
}
}

This works fine... other than the fact that I get a message that reads error undefined... which i click ok about 2 times then I get the correct alert and instead of allowing me to correct the problem in IE7 and IE8 the form just processes.

Thanks guys any help would do

Matt

Answer 1

Look at the jQuery validation plugin. With the plugin it would just be a matter setting up the rules properly. You could get fancier and replace the default messages if you want. Check out the examples.

<script type="text/javascript">
    $(function() {
       $('form').validate({
            'input1': {
                  required: {
                      depends: function() { $('#input2').val() == '' }
                  }
             }
       });
    });
</script>

This sets it up so that input1 is required if input2 is empty, which should be sufficient since if input1 has a value, you don't need input2 and if neither has a value, then it will show your message for input1.

<input type="text" name="input1"  />
<input type="text" name="input2"  />

Answer 2

take the alert() out of your assessment function- you're trying to do too much at once. a function to determine if input is valid or not should do only that one thing.

determine the state of your inputs first and then do something like

var field1Pass = validate_required(input1);
var field2Pass = validate_required(input2);

if ( !(field1Pass && field2Pass)  ) {
    alert("Need a donation amount to continue");
    // TODO: logic to determine which field to focus on
    return false;
}

Answer 3

If I am understanding correctly, you only want to do the alert if both of the inputs are empty. If that's the case here's a refactoring of your code that will handle that.

function validate_required(field) 
{ 
    with (field) 
    { 
        if (value==null||value=="") 
        {
            return false;
        } 
        else 
        {
            return true;
        } 
    } 
} 
function validate_form(thisform) 
{ 
    with (thisform)
    { 
        if (validate_required(input1)==false && validate_required(input2)==false) 
        {
            alert('Need a donation to continue');
            input1.focus();
            return false;
        }
    } 
} 

Answer 4

var msg = "Need a donation amount to continue";

function validate_required(value) {
    if(isNaN(value) || value == null || value == "") {
        return false;
    }
    return true;
}


function validate_form(thisform) {
    var i1 = validate_required($(thisform.input1).val());
    var i2 = validate_required($(thisform.input2).val());
    if(!(i1 && i2)) {
        alert(msg);
        thisform.input2.focus();
        return false;
    }
}

Answer 5

Here's my take, with refocusing on the first field that failed:

<body>

<form action="#" onsubmit="return validate(this);">
    <input type="text" name="val0" /><br />
    <input type="text" name="val1" /><br />
    <input type="submit" />
</form>

<script type="text/javascript">
    function validate(form) {
        var val0Elem = form.val0, val1Elem=form.val1, elementToFocus;
        // check fields and save where it went wrong
        if (!numeric(val0Elem.value)) {elementToFocus=val0Elem;}
        else if (!numeric(val1Elem.value)) {elementToFocus=val1Elem;}
        // if there is an element to focus now, some validation failed
        if (elementToFocus) {
            alert('Enter numbers in both fields, please.')
            // using select() instead of focus to help user
            // get rid of his crap entry :)
            elementToFocus.select();
            // ..and fail!
            return false;
        }
        // Helper function, "if a string is numeric":
        // 1: it is not 'falsy' (null, undefined or empty)
        // 2: it is longer than 0 too (so that '0' can be accepted)
        // 3: it passes check for numericality using the builtin function isNaN
        function numeric(s) {return (s && s.length>0 && !isNaN(s));}
    }
</script>

</body>