Contact form, one of two input fields populated check

Question

Ok, so I've been looking around for conditional statements in JQuery but I cant find a solution on how to check to make sure that at least one of two inputboxes has content.

This is what I have so far

$('#send').click(function(){ // when the button is clicked the code executes
$('.error').fadeOut('fast'); // reset the error messages (hides them)

var error = false; // we will set this true if the form isn't valid

var name = $('input#namn').val(); // get the value of the input field
var message = $('textarea#meddelande').val(); // get the value of the textarea
var phone = $('input#telefon').val(); // get the value of the input field
var email_compare = /^([a-z0-9_.-]+)@([da-z.-]+).([a-z.]{2,6})$/; // Syntax to compare against input
var email = $('input#epost').val(); // get the value of the input field

if(name == "" || name == " " || name == "namn" || name.length < 2) {
    $('input#namn').val("namn").css({ 'color': 'red' });
    error = true; // change the error state to true
}

if(phone == "" || phone == " " || phone == "telefon" || phone.length < 5) {
    $('input#telefon').val("telefon").css({ 'color': 'red' });
    error = true; // change the error state to true
}

if (email == "" || email == " " || email == "epost") { // check if the field is empty
    $('input#epost').val("epost").css({ 'color': 'red' });
    error = true;

}else if (!email_compare.test(email)) { // if it's not empty check the format against our email_compare variable
    $('input#epost').val("kontrollera epost").css({ 'color': 'red' });
    error = true;
}

if(message == "" || message == " " || message == "meddelande" || message.length < 10) {
    $('textarea#meddelande').val("meddelande").css({ 'color': 'red' });
    error = true; // change the error state to true
}

if(error == true) {
    $('#err-form').fadeIn('fast');
    return false;
}

var data_string = $('#ajax-contactform').serialize(); // Collect data from form

$.ajax({
    type: "POST",
    url: $('#ajax-contactform').attr('action'),
    data: data_string,
    timeout: 6000,
    error: function(request,error) {
        if (error == "timeout") {
            $('#err-timedout').fadeIn('fast');
        }
        else {
            $('#err-state').fadeIn('fast');
            $("#err-state").html('Ett fel uppstod: ' + error + '');
        }
    },
    success: function() {
        $('#ajax-contactform').fadeOut('fast');
        $('#success-msg').fadeIn('slow');
    }
});

return false; // stops user browser being directed to the php file

}); // end click function

And its working fine. However, I would like to make a conditional statement to check and make sure that either the email OR phone have content. I don't want to force people to have to leave both, but at least ONE.

So if phone has content (only numbers, not the word "telefon") then email is no longer mandatory and vice versa. If email has content it still needs to check to make sure its a valid email.

How would I go about doing this? I'm at a bit of a lost here :(

Answer 1

So this is what I ended up using.

$(function() {
        var input = $('input[type=text], textarea');

        input.focus(function() {

             var ibf = $(this);

             if(ibf.val() == ibf.attr('title'))
                 ibf.val('');

             if(ibf.css({ 'color': 'red' }))
                 ibf.css({ 'color': '' });

        }).blur(function() {
             var ibb = $(this);

             if(ibb.val() == '')
                 ibb.val(ibb.attr('title'));
        });

    });

    $("#telefon").keydown(function(e){
        var key = e.charCode || e.keyCode || 0;
        // allow backspace, tab, delete, arrows, numbers and keypad numbers ONLY
        return (  
            key == 8 ||   
            key == 9 ||  
            key == 46 ||  
            (key >= 37 && key <= 40) ||  
            (key >= 48 && key <= 57) ||  
            (key >= 96 && key <= 105));  
    });

    $('#send').click(function(){ // when the button is clicked the code executes
        $('.error').fadeOut('fast'); // reset the error messages (hides them)

        var error = false; // we will set this true if the form isn't valid

        var name = $('input#namn').val(); // get the value of the input field
        var message = $('textarea#meddelande').val(); // get the value of the input field
        var phone = $('input#telefon').val(); // get the value of the input field
        var email_compare = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i); // Syntax to compare against input
        var email = $('input#epost').val(); // get the value of the input field

        if(name == "" || name == " " || name == "namn" || name.length < 2) {
            $('input#namn').val("namn").css({ 'color': 'red' });
            error = true; // change the error state to true
        }

        var phone_valid = phone.length >= 6;
        var email_valid = email_compare.test(email);

        if(phone_valid && phone != 'telefon' || email_valid){ //one of two are populated
            //make donut

        }else{
            /*$('input#telefon').val("telefon").css({ 'color': 'red' });
            $('input#epost').val("epost").css({ 'color': 'red' });
            $('#err-form-contact').fadeIn('fast');*/                
            error = true;

            if (!phone_valid && phone != 'telefon' && phone != ''){
                 $('input#telefon').val("telefon").css({ 'color': 'red' });
            }

            if (!email_valid && email != 'epost' && email != ''){
                $('input#epost').val("epost").css({ 'color': 'red' });
            }
        }

        if(message == "" || message == " " || message == "meddelande" || message.length < 10) {
            $('textarea#meddelande').val("meddelande").css({ 'color': 'red' });
            error = true; // change the error state to true
        }

        if(error == true) {
            $('#err-form').fadeIn('fast');
            return false;
        }

        var data_string = $('#ajax-contactform').serialize(); // Collect data from form

        $.ajax({
            type: "POST",
            url: $('#ajax-contactform').attr('action'),
            data: data_string,
            timeout: 6000,
            error: function(request,error) {
                if (error == "timeout") {
                    $('#err-timedout').fadeIn('fast');
                }
                else {
                    $('#err-state').fadeIn('fast');
                    $("#err-state").html('Ett fel uppstod: ' + error + '');
                }
            },
            success: function() {
                $('#ajax-contactform').fadeOut('fast');
                $('#success-msg').fadeIn('slow');
            }
        });

        return false; // stops user browser being directed to the php file
    }); // end click function

Now it only checks that ONE of the TWO boxes (email/phone) has content.

Answer 2

you can just add else if between phone and email if condition.. so that if phone exists email is not checked or else if email exists ..phone is not checked

if(phone == "" || phone == " " || phone == "telefon" || phone.length < 5) {
  $('input#telefon').val("telefon").css({ 'color': 'red' });
   error = true; // change the error state to true
} else if (email == "" || email == " " || email == "epost") { // check if the field is empty
//^^^ HERE
   $('input#epost').val("epost").css({ 'color': 'red' });
   error = true;

}else if (!email_compare.test(email)) { // if it's not empty check the format against our email_compare variable
  $('input#epost').val("kontrollera epost").css({ 'color': 'red' });
  error = true;
} 

however i recommened you to have a look to jquery validation plugins... easy to use and customize...rather than writing the whole codes

Answer 3

if (! ( (phone.length && phone != 'telefon') || email.length)) {
    //none of the above has input
}