Валидатор jQuery - подсветка раскрывающегося списка в IE - PullRequest
Новая
       3

Валидатор jQuery - подсветка раскрывающегося списка в IE

0 голосов
/ 09 марта 2011

Я использую плагин валидатора для jQuery, и недопустимые поля получают красную рамку.Это делается путем добавления стиля границы к классу css «error», но у меня есть проблема с выпадающими списками (выберите) в IE, поскольку он не будет использовать стиль границы (прекрасно работает в Firefox).В демоверсии валидатора Marketo (http://jquery.bassistance.de/validate/demo/marketo/step2.htm) он работает для IE именно так, как мне нужно.Но, черт возьми, я не могу понять, как это происходит.Даже если я сохраню копию страницы локально, моя копия не будет работать так, как она работает на сервере bassistance, и мне интересно, связано ли это с парой включений, к которым я не могу добраться (jquery.delegate.js).

TIA

1 Ответ

0 голосов
/ 09 марта 2011

Это прекрасно работает в IE 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-200000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title>Subscription Signup | Marketo</title>

<link rel="shortcut icon" href="/favicon.ico" />


<script src="http://jquery.bassistance.de/validate/lib/jquery.js" type="text/javascript"></script>
<script src="http://jquery.bassistance.de/validate/lib/jquery.metadata.js" type="text/javascript"></script>
<script src="http://jquery.bassistance.de/validate/lib/jquery.ajaxQueue.js" type="text/javascript"></script>
<script src="http://jquery.bassistance.de/validate/lib/jquery.delegate.js" type="text/javascript"></script>
<script src="http://jquery.bassistance.de/validate/jquery.validate.js" type="text/javascript"></script>

<script type="text/javascript" src="http://jquery.bassistance.de/validate/demo/marketo/jquery.maskedinput.js"></script>
<script type="text/javascript" src="http://jquery.bassistance.de/validate/demo/marketo/mktSignup.js"></script>

<link rel="stylesheet" type="text/css" media="screen" href="http://jquery.bassistance.de/validate/demo/marketo/stylesheet.css" />
</head>
<body>
<!--[if lte IE 6]>
  <link rel="stylesheet" type="text/css" media="all" href="http://jquery.bassistance.de/validate/demo/marketo/ie6.css" />
<![endif]-->


  <!-- start main content  -->
  <div class="main-content resize">

  <div class="action-container" style="display:none;"></div>


<h1>Step 2 of 2</h1>
<h2>Billing Information</h2>
<p>
</p>
<br clear="all" />
<div>
  <form id="billingForm" action="" method="get" >
    <div class="error" style="display:none;">
      <img src="images/warning.gif" alt="Warning!" width="24" height="24" style="float:left; margin: -5px 10px 0px 0px; " />

      <span></span>.<br clear="all" />
    </div>
    <table cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td class="label">Credit Card Type:</td>
        <td class="field">
          <select id="cc_type" class="required" name="cc_type" class="creditCardType" tabindex="11">
            <option value="">Choose Credit Card</option>
            <option value="amex">American Express</option>
            <option value="discover">Discover</option>
            <option value="mastercard">MasterCard</option>
            <option value="visa">Visa</option>
          </select>
        </td>
      </tr>
      <tr>
        <td class="label">Expiration:</td>
        <td class="field">
          <select id="cc_exp_month" name="cc_exp_month" title="ExpirationMonth" tabindex="12">
            <option value="01">01 - Jan</option>
            <option value="02">02 - Feb</option>
            <option value="03">03 - Mar</option>
            <option value="04">04 - Apr</option>
            <option value="05">05 - May</option>
            <option value="06">06 - Jun</option>
            <option value="07">07 - Jul</option>
            <option value="08">08 - Aug</option>
            <option value="09">09 - Sep</option>
            <option value="10">10 - Oct</option>
            <option value="11">11 - Nov</option>
            <option value="12">12 - Dec</option>
          </select>
          <select id="cc_exp_year" name="cc_exp_year" title="ExpirationYear" tabindex="13">
            <option value="2007">2007</option>
            <option value="2008" selected="selected">2008</option>
            <option value="2009">2009</option>
            <option value="2010">2010</option>
            <option value="2011">2011</option>
            <option value="2012">2012</option>
            <option value="2013">2013</option>
            <option value="2014">2014</option>
            <option value="2015">2015</option>
            <option value="2016">2016</option>
          </select>
        </td>
      </tr>
      <tr>
        <td class="label"><label for="credit_card">Credit Card Number:</label></td>
        <td class="field">
          <input maxlength="40" id="creditcard" class="required" name="credit_card" size="20" type="text" tabindex="14" />
        </td>
      </tr>
      <tr>
        <td class="label"><label for="cc_cvv">Security Code:</label></td>
        <td class="field">
          <input id="ccNumber" class="required" maxlength="4" name="cc_cvv" style="width: 30px;" type="text" style="vertical-align: top;" tabindex="16" value="" />
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <div class="buttonSubmit">
            <span></span>
            <input class="formButton" type="submit" value="Finish" style="width: 180px" />
          </div><br clear="all"/>

        </td>
      </tr>
    </table>
  </form>
  <br clear="all" />

</div>



    </body>
</html>
...