电子邮件和选择选项验证,更改标签图像

时间:2013-01-08 19:33:10

标签: javascript label

如果有人可以帮我解决这个问题,请。 我需要将标签旁边的图像设置为“星形”,在电子邮件字段有效时更改“检查”图像,并在选择选项时进行相同的操作。 如果未完成电子邮件字段或未选择主题,则带有星标的图像将保持不变。

这是我的html表单 - >

<form id="jform" method="post" action="#" name="jform"  enctype="multipart/form-data">
            <p> 

                    <label for="email"  id="email"  class="w_160 block req_e">E-mail:</label>
                    <input type="text" name="email" id="email" onClick="checkEmail(document.signupform.email.value)" >
            </p>
            <p>     
                    <label for="subject" name="subject" class="w_160 block req">Subject:<!-- <span>* </span> --> </label> 
                    <select name="subject" class="subject" id="subject">
                        <option value="0">select subject</option>
                        <option value="1">subject 1</option>
                        <option value="2">subject 2</option>
                    </select>
            </p>

        </form> 

这是CSS - &gt;

.req{
    background: url(images/req_star.png) 65px center no-repeat;
    display: block;
}
.req_e{
    background: url(images/req_star.png) 90px center no-repeat;
    display: block;
    padding-left: 35px;
}

.correct{
    background: url(images/valid.png) 65px center no-repeat;
    display: block;
}
.correct_e{
    background: url(images/valid.png) 90px center no-repeat;
    display: block;
    padding-left: 35px;
}

JavaScript - &gt;

$(document).ready(function(){

    var jVal = {

        'email' : function checkEmail() {
                var email = document.getElementById('email');
                var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
                if (!filter.test(email.value)) {
                $('mail').removeClass('correct_e');
                                $('mail').addClass('req_e');
                email.focus;
                return false;
                }
                else{
                        $('mail').removeClass('req_e');
                                            $('mail').addClass('correct_e');
                    }
                }

        'subject' : function() {
        var ele = $('#subject');
        var pos = ele.offset();

        sub.css({
                top: pos.top-10,
                left: pos.left+ele.width()+40
            });

            if(form.subject.selectedIndex > 0) { // an option has been selected 
                sub.removeClass('req').addClass('correct');
                    ele.removeClass('correct').addClass('req');

            } else { // no option selected 
                    jVal.errors = true;
                    sub.removeClass('correct').addClass('req');
                    ele.removeClass('req').addClass('correct');
            }   
    }

    };

// ====================================================== //


    $('#email').change(jVal.email);
    $('#subject').change(jVal.subject);

});

0 个答案:

没有答案