电子邮件地址和电话验证| jQuery的

Question

Having some trouble getting validation to work for Email and Phone on an input field.

Basically I'm after validation on the email input when it is selected. Phone validation - mainly to check for numbers used.

I found jQuery Validate and referenced that in my demo.

This is my first time to Reg Ex Validation and got a little confused so was hoping someone could help me on that front.

The phone validation is working however, I can't seem to figure out how to meet the requirements of the field when testing. It's also asking email as a required field.

Ultimately, a user has to input either a valid email or phone number so validation or error handling will need to be done for that too which I can do.

DEMO HERE

Here is my jQuery:

var ebuForm = {

        init : function() {
            ebuForm.showInput();
            ebuForm.validatePhone();
        },

        showInput : function(e) {

            var radioInput = $("input[type='radio']"),
                emailRadio = $("input[value='email']");

            radioInput.change(function(){

                var emailInput = $('.email-input'),
                    phoneInput = $('.phone-input');

                if($(this).val() =="email") {
                    emailInput.show();
                    phoneInput.hide();
                    console.log('Email Enabled');
                } else {
                    emailInput.hide();
                    phoneInput.show();
                    console.log('Phone Enabled');
                }

            });
            emailRadio.prop('checked', true).trigger("change");
        },

        validatePhone : function() {
            $('#myform').validate({
                rules: {
                    phone: {
                        phoneUS: true,
                        required: true
                    }
                },
                submitHandler: function(form) { // for demo
                    alert('valid form');
                    return false;
                }
            });

        }

};
$(function() {
    ebuForm.init();
});

Answer 1

Working Fiddle Example: http://jsfiddle.net/775X2/56/

Your HTML:

<form id="myform">
    <div class="grid4">
        <input type="radio" checked="checked" tabindex="50" class="left" name="x" id="email" value="email" />
        <label for="email" class="left marginRight20">Email</label>
        <input type="radio" tabindex="60" class="left" name="x" id="phone" />
        <label for="phone" class="left">Phone</label>
        <br />
        <input type="text" class="email-input" name="emailer" placeholder="Email Address" />
        <input type="text" class="phone-input" name="phone" placeholder="Phone Number" />
    </div>
</form>
<a href="http://docs.jquery.com/Plugins/Validation" target="_blank">Validation Documentation</a>

Some jQuery:

var ebuForm = {

    init: function () {
        ebuForm.showInput();
        ebuForm.validatePhone();
    },

    showInput: function (e) {

        var radioInput = $("input[type='radio']"),
            emailRadio = $("input[value='email']");

        radioInput.change(function () {

            var emailInput = $('.email-input'),
                phoneInput = $('.phone-input');

            if ($(this).val() == "email") {
                emailInput.show();
                phoneInput.hide();
                console.log('Email Enabled');
            } else {
                emailInput.hide();
                phoneInput.show();
                console.log('Phone Enabled');
            }

        });
        emailRadio.prop('checked', true).trigger("change");
    },

    validatePhone: function () {
        $('#myform').validate({
            rules: {
                phone: {
                    phoneUS: true,
                    required: true
                },
                emailer: {
                    required: true,
                    email: true
                },
            },
            submitHandler: function (form) { // for demo
                alert('valid form');
                return false;
            }
        });

    }

};
$(function () {
    ebuForm.init();
});