jQuery Validator - emphasize dropdown selection in Internet Explorer

I am currently utilizing the validator plugin for jQuery, which adds a red border to invalid fields by applying a border style to the css class "error". However, I am encountering an issue with dropdowns (select) in Internet Explorer, as they are not displaying the border style (although they work fine in Firefox).

In the validator demo Marketo (), the border styling works perfectly in IE as I require. Yet, I am unable to discern how this is achieved. Even after saving a local copy of the page, it does not function the same as it does on the bassistance server. I am unsure if this discrepancy is related to the inclusion of certain scripts that I am unable to access (jquery.ajaxQueue.js and jquery.delegate.js).

Any insights or assistance would be greatly appreciated. Thank you in advance.

jquerycssinternet-explorerbordervalidation

Answer №1

This code functions perfectly in Internet Explorer

<!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>Sign up for Newsletter | Example Company</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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using JQuery functions from other JavaScript files is Simple

When it comes to my CSS, I have taken the approach of creating smaller files for specific functions and then using minification to merge and compress them into one file for easier download. I want to apply the same strategy to my JS Files by logically sep ...

jqueryhtmlcss

Insert a Facebook like button

I am trying to dynamically append a Facebook like button to a specific div using dynamic URLs. For an example of how this can be done, please refer to this simple demonstration: JsFiddle After attempting to insert the code within an ajax call, I encounter ...

jqueryajaxfacebookfacebook-like

What is the reason for the background image not appearing while utilizing a bootstrap template designed for it?

I recently started working on an asp.net application and decided to integrate a pre-made bootstrap template for the frontend. After some searching, I came across this one. The original site showcasing the template looked really appealing with a background ...

htmlcssbootstrap-4

Having trouble selecting an element by name that contains a specific string followed by [..] using jQuery

I have elements with names like kra[0][category], kra[1][category], and so on. However, I am facing difficulties in selecting these elements by name. Here is my jQuery code: $("[name=kra[0][category]]").prop("disabled", true); ...

javascriptjquery

What are the steps for implementing the innerClass style on the searchBox within the appBase?

I'm currently incorporating the searchBox component from appbase io into my upcoming js web application, but I've been facing challenges in customizing the layout of both the search box and the list. Despite following the documentation which sug ...

cssreactjsobjectnext.js

Ajax: What could be causing the post request to be triggered twice?

I am puzzled by the fact that my request is being sent twice, without any clear reason. Here is the code for my simple form: <form method="POST" class="mb-4" autocomplete="off" action="/recipe/add" novalidate id="form"> <div class="form-grou ...

javascriptjqueryajax

Creating a Timetable Interface; which plugin or tool should I use for this project?

Here is a concept I am looking to develop... I am struggling with the layout using only css/js ... Is there a jquery plugin or tool that could assist with this? Would this be considered a reverse orientation calendar? Starting from scratch has proven to ...

jqueryweb-applicationslayout

Is there a way to deactivate jQuery's mobile-friendly layout?

I need some help with this issue. I have created a design with jQuery Mobile UI, but I want to disable the responsive layout feature. Can anyone guide me on how to remove it? ...

jqueryjquery-uijquery-mobile

What are some ways to modify the appearance of the post title table using CSS?

In this snippet of HTML code- <table style='min-width:60%;height:25px;'> <tr> <td><b><data:post.title></b></td> <td id='date-and-author' style='position: relative;bo ...

htmlcsshtml-table

Can you explain the significance of xs, md, and lg within the CSS Flexbox framework?

Currently in the process of developing an application using React and looking to apply some styles to my components. I stumbled upon which delves into a fluid grid system. A snippet from the example is shown below: <Row> <Col xs={12} sm={3} m ...

cssreactjsflexboxreact-flexbox-grid

Conditional statements in jQuery that are based on the current URL

I am working on a scenario where I need the button colors to change based on the page being viewed. The animation is already set up with a default color and an array of other colors. What I am trying to achieve is, when I am on the 'red' page, I ...

jquerystringurl

The functionality of Jquery autocomplete _renderItem appears to be malfunctioning

There seems to be an issue with the _renderItem function as it is not executing at all. I even tried using console.log to debug but no messages are being printed. I also attempted using various attributes like 'autocomplete', 'ui-autocomplet ...

javascriptjqueryjquery-uiautocomplete

The loading icon appears stuck and does not rotate on iOS version 15.3 and above, but functions properly on versions below 15.3

The loading icon does not spin on iOS versions > 15.3 or 16.1, but it works perfectly fine on lower iOS versions for iPhone and iPad, as well as on Android browsers. Below is the CSS code for reference. I've attempted using webkit for Safari and a ...

cssiosiphonecss-animationscss-transforms

Issue with the loop function

When I try to loop through my code, I keep getting the same "y" value (5) and it doesn't change. What I actually want is to make the ajax call repeat X times [all], passing both the response and the current call number through an anonymous function. A ...

javascriptjqueryloopsfor-loop

Is there a method in JS/jQuery to fill my input field with a constant string and ensure leading zeros are included?

I am looking to create an input textbox that starts with a fixed string followed by up to 6 leading zeros. As the user types in the input box, the leading zeros will be automatically removed once the maximum length of 6 characters is reached. The initial s ...

javascripthtmljquery

Tacking the progress bar onto an array of $.ajax() calls within a Promise.all

FINAL UPDATE 25/06/20: After a thorough investigation, I discovered the root causes of why the progress bar was not functioning as intended. Firstly, dealing with $.ajax() proved to be cumbersome due to its lack of proper promise handling. To resolve this ...

javascriptjqueryajaxpromiseprogress-bar

"Can you provide instructions on how to set the background to the selected button

How can I change the background color of a selected button in this menu? Here is the code for the menu: <ul id="menu"> <li class="current_page_item"><a class="button" id="showdiv1"><span>Homepage</span></a></ ...

javascriptjqueryhtmlcss

Border only at the bottom of the outline

I need help creating a bottom outline border when the cursor hovers over an image. I prefer to use this inner border style to avoid any layout issues with a traditional border-bottom. Below is my current code, which includes outline margins: .img-lightbox ...

htmlcssborderoutline

impact on the shape of the region's map

Is it possible to add an effect like a border or opacity when hovering over an area in an image map? I've tried using classes and applying hover effects with borders or opacity, but nothing seems to work as expected. Here's my code: <img src= ...

htmlcssdictionary

Steps for including a solid bottom border in a toggled navigation bar that is responsive

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l ...

htmlcssbootstrap-5