SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery form e-mail OR phone required

    Hi there,

    I'm pretty noob, and try as I may I cannot fathom how to get my form to give an error message if the telephone or email is not filled in. I only need one of them to be filled in, i.e. it's a contact form, I need to be able to respond somehow.

    I can make it do an error for each individually, but not either or. I was trying to use an OR statement. || but I couldn't make it work

    Your suggestions are invaluable.

    Cheers in advance,
    Eoin

    p.s. what is a trackback?

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by uglyeoin View Post
    I'm pretty noob, and try as I may I cannot fathom how to get my form to give an error message if the telephone or email is not filled in.
    Give the form a unique identifier, and attach an onsubmit event to the form.

    Code html4strict:
    <html>
    ...
    <body>
    <form id="userDetails">
        ...
    </form>
    ...
    <script src="script.js"></script>
    </body>
    </html>

    script.js
    Code javascript:
    var form = document.getElementById('userDetails');
    form.onsubmit = function () {
        ...
    };

    In the onsubmit function, check that either the telephone is entered, or the email is entered.

    Code javascript:
    form.onsubmit = function () {
        var form = this,
            telephone = form.elements.telephone,
            email = form.elements.email;
        if (telephone.value || email.value) {
            // at least one is okay, no action needed
        } else {
            alert('Please provide either a telephone number or an email address.');
            return false;
        }
    };

    Or, you can invert the if condition like this:

    Code javascript:
    if (!(telephone.value || email.value)) {
        alert('Please provide either a telephone number or an email address.');
        return false;
    }

    Or, you can invert the terms in the if condition:

    Code javascript:
    if (!telephone.value && !email.value) {
        alert('Please provide either a telephone number or an email address.');
        return false;
    }

    All three do the same job, but there should only be one of them that gives you a better understanding of what the code is wanting to achieve.

    Quote Originally Posted by uglyeoin View Post
    p.s. what is a trackback?
    When you click on it you go to an info page that explains exactly what it does.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you oh mighty Javascript Guru. I like your "Ham is to Hamster" quote

    I am still struggling.

    Because I want to use email validation too, I have been working with the validation plugin for Jquery.

    So I tried to adapt your script as follows:
    Code JavaScript:
    var form = document.getElementById('#homepage_enquiry');
    form.onsubmit = function () {
        var form = this,
            tel = form.elements.tel,
            email = form.elements.email;
    	if (tel.value || !email.value) {
    		        // at least one is okay, no action needed
        } 	
    	if (!tel.value || email.value) {
    		     	$('#email').validate({
    					rules: {
    						email: {required: true, email: true},
    							}
    						})
    					} 	
    	else {
            alert('Please provide either a telephone number or an email address.');
            return false;
        }

    It doesn't seem to validate at all any more. It's really frustrating and I haven't even started trying to get the error messages in the right place yet!

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Using the jQuery validation means that a completely different solution is available for you.
    You can use a dependency expression

    Code javascript:
    rules: {
        email: {required: '#telephone: blank'}
    }

    So that the email will only be required if the telephone is blank.

    You can do similar with the telephone rule too.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah thank you sweet Guru of the South, I am still struggling though. I have now come up with:

    Code JavaScript:
    //New Validation
    	$('#homepage_enquiry').validate({
    		rules: {
    			name: {required: true},
    			enquirytb: {required: true},
    		    email: {required: '#tel: blank', email: true, required: true},
    		    tel: {required: '#email: blank', required: true}
    		},
    		success: function(label) {
    			label.addClass('valid');
    		}
    	});
    	$('#homepage_enquiry :input').blur(function(){}).valid();

    As you can see it's supposed to be rather simple. You need to tell me your name, you need to enter an enquiry, and you need to enter either an email or a telephone number. Presently it requests both things.

    If I remove the "required: true" from both the tel/email it requests neither, although gets upset if I don't put in a correct email address.

    Argghhh the sooner they invent knowledge transfers from one brain to another the happier I'll be In case that's tomorrow please remember me calling shotgun on your brain "SHOTGUN".

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by uglyeoin View Post
    Ah thank you sweet Guru of the South, I am still struggling though.
    Look at these:

    Code:
    email: {required: '#tel: blank', email: true, required: true},
    tel: {required: '#email: blank', required: true}
    You only need the one required there. The second required part on each line is clobbering the first one, so get rid of that second one.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did try that, but then as I say it wasn't validating at all, except if I filled in the email address then it would demand a correct email address (and I didn't very much care for it's manners lol).

    essentially if I left both form fields blank it didn't require any validation for those parts

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by uglyeoin View Post
    I did try that, but then as I say it wasn't validating at all, except if I filled in the email address then it would demand a correct email address (and I didn't very much care for it's manners lol).

    essentially if I left both form fields blank it didn't require any validation for those parts
    Do you have a sample page so that I may experiment locally and craft together a working solution?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok mighty Guru, I hath returned with a sample page which can be found here:
    Rather Testing Form

    Sorry I took so long, it's a crazy life I lead.

    Forget the daft layout of the form that's the least of my worries that sort of stuff I can happily muddle along with and end up working out how to do it. And ignore the fact that the errors get in the way. I'm sure I'll bother someone about solving that problem in due time (small steps for little feet).

    What I need to really achieve is email and/or telephone needs to be filled in. As you can see I have managed to ensure that name and enquiry fields are required (which is why I've not replied for so long I've spent much of the time patting myself on the back).

    After that I'm going to deal with the recapcha business which you may notice I've got half way installed.

    Anyway here's my testing process so far:
    Fill in name and enquiry, submit, it all seems to work. Yet no phone/email was filled in.
    Fill in nothing it won't submit. That's good.
    Fill in Name, Enquiry, Phone and it submits, that's fine
    Fill in Name, Enquiry, and an Incorrect email address and it won't submit (good)
    Fill in name, enquiry and a correct email address and it works (fine).

    I know it's not the best form in the world and if that hampers you then feel free to fire abuse my way and I will change it to be more suitable (or try) so that it's easier to work with.

    Many thanks for taking the time to help me, one day when I'm a mighty Guru I hope to remember the favour and help back.

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Here's what you currently have for the tel and email validation rules:

    Code:
    email: {required: '#tel: blank', email: true},
    tel: {required: '#email: blank'}
    The space before the blank needs to be removed, and that email:true part shouldn't be there either.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hold up. I've tried that, it works better now I think, but there's still the issue of the "OR" function.

    It seems to require both of them. Or is it something that I've done? It seems to be that once the error message is there it doesn't go away again.

    In fact it does seem to go away if I tab between boxes but not if I click. I've used the "onblur" validate function, but I'm guessing that's not the only thing I need to do. Do I use !onfocus?

    and I do need the email:true bit because that makes sure it's a proper email address.

  12. #12
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    actually if telephone and email are both empty it needs to have an error message saying "you need to enter an email address or telephone number" rather than demanding that both fields are required.

  13. #13
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wooo hoooo I made it workkkkk. Thanks for all your help Guru, you're amazing, and I'm glad you took the time to give me your input. Mucho Gracias


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •