1

请，如果有人可以帮助我解决这个问题。我需要在标签旁边制作图像“星号”，当电子邮件字段有效时更改“检查”图像，并且在选择选项时会发生同样的事情。如果未填写电子邮件字段或未选择主题，则带有星号的图像相同。

这是我的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 ->

.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 ->

$(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);

});
4

0 回答 0