Grow your CSS skills. Land your dream job.

HTML form – make one of two fields required

  • # July 5, 2012 at 9:50 am

    I’m thinking about adding a contact form to my my art league’s website.

    It’ll have just five fields (TO, with the addressees selectable from a list; YOUR NAME, a text field without any pattern-matching validation; YOUR PHONE, also text with no pattern-matching validation; YOUR EMAIL, a text field probably with some validation to insure a valid email address syntax; and MESSAGE, a text field probably with a maximum character limit) plus, of course, a SEND button. Even though this will be my first form, I’ve read enough that I think I can handle the markup and CSS, so I’m not asking for help with that (at least not yet).

    But we’ll need to have either YOUR PHONE or YOUR EMAIL required – one of these, but not both.

    Some Google searching suggests that this is possible using scripting, or possibly if you’re using PHP. Unfortunately I am completely inexperienced with scripting and PHP, so those are not options for me.

    Is there a pure HTML/CSS way to accomplish this?

    Thanks

    # July 5, 2012 at 10:29 am

    “But we’ll need to have either YOUR PHONE or YOUR EMAIL required – one of these, but not both.”.

    People won’t understand that, if they see two fields they’ll automatically complete them especially as they are compulsory (in effect).

    If you need one of two, I’d give them an option to select their preferred choice and then reveal the necessary input.

    Alternatively, make them enter both but insist on a ‘preferred’ method…it’s just coming at it from the other direction.

    # July 5, 2012 at 11:04 am

    Thanks for the quick response – I appreciate it.

    Just to clarify:

    I was planning on having something (maybe an * with a note “* = required”) to indicate required fields, but got stuck on how to indicate that we’d like both but only 1 of the 2 was required.

    I wasn’t thinking of including the sentence “But we’ll need to have either YOUR PHONE or YOUR EMAIL required – one of these, but not both.” on the form., but maybe that’s the simplest way to go if I phrase it better.

    And maybe I’m wrong, but if I see a form with fields for my phone number and email address that are NOT required, I’ll usually leave them blank. I think that people are increasingly realizing that it’s not in their best interests to divulge this info (selling to telemarketers, opening the door to SPAM, etc.) unless it’s absolutely necessary.

    # July 5, 2012 at 12:37 pm

    When you get to the validation part, you can validate with either php or jQuery. I personally prefer doing the PHP route, but both work. In order to check if only one is filled out, it’d just be a simple if statement:

    if (!empty($_POST) || !empty($_POST)):
    // One is filled
    endif;

    You could shorten this a different way if you did a check for just one, etc.

    # July 5, 2012 at 2:41 pm

    Thanks Chris.

    As I said, I have zero experience/knowledge of PHP or scripting, but I think I follow your example. Will try it later today.

    Meanwhile, is it true that there’s no way to do this (make it so that either of two fields is required) with just HTML & CSS?

    # July 5, 2012 at 2:45 pm

    As far as I know, you can’t do that with just HTML & CSS. The same effect would work in jQuery if you’d be more comfortable using that.
    You should totally look into learning some PHP when you have free time. It’s super fun (and then you can make WordPress themes. :P).

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".