表单验证无法读取null的属性样式

时间:2014-05-11 07:20:22

标签: javascript html css

我有一个带验证的表单但没有显示日期验证消息,并且在控制台中它读取了...属性为null并突出显示了此代码" error_box.style.display =' block&#39 ;;"在这个功能的范围内。

function displayError(fieldname, message){
    var input_field = document.querySelector('#'+fieldname);
    var error_box = document.querySelector('#'+fieldname+'Message');

    addClass(input_field, 'error');
    removeClass(input_field, 'correct');
    error_box.style.display = 'block';
}

我在小提琴中有完整的代码: http://jsfiddle.net/tUa5e/

HTML

    <form action="#">
<div class="formColumn1">

     <label for="pickup"><span class="textStyle">Pick-up</span>
        <input type="date" id="pickup"></label><br>

          <label for="dropoff"><span class="textStyle">Drop-off</span>
        <input type="date" id="dropoff"><br>
        <span id="dropoff" class="message">That date is invalid</span></label>

    <div id="pickuperror"></div>


</div>
<!--COLUMN ONE END -->
</div>

<!--COLUMN TWO -->
<div class="formColumn2">

        <label for="name"><span class="textStyle">Full Name*</span>
        <input type="text" id="name"><br>
        <span id="nameMessage" class="message">You must have a valid name</span>
         </label>

        <label for="email"><span class="textStyle">Email*</span>
        <input type="text" id="email"><br>
        <span id="emailMessage" class="message">You must have a valid email</span>
         </label>

        <label for="phoneNumber"><span class="textStyle">Phone Number*</span>
        <input type="text" id="phoneNumber"><br>
        <span id="phoneNumberMessage" class="message">You must have a valid phone number</span>
         </label>

        <label for="postalAddress"><span class="textStyle">Postal Address</span>
         <input type="text" id="postalAddress"><br>
         </label>

        <label for="city"><span class="textStyle">City</span>
        <input type="text" id="city"><br>
        </label>

        <span class="textStyle">Addtional Information</span>
        <textarea name="comment" form="usrform">Enter text here...</textarea>

        <input type="submit" id="submit" value="Submit"/>

<!--COLUMN TWO END-->
</div>

    </form>
<!--END OF FORM-->
</div>

0 个答案:

没有答案