Home/ Questions/Q 5935493
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T15:15:45+00:00

My code works in all major browsers, except for Google Chrome, where it’s acting

  • 0

My code works in all major browsers, except for Google Chrome, where it’s acting weird. I’m using Google Chrome 11.0.696.68. These facts apply for Chrome:

  • If I give values to all input fields, I can submit the form without any trouble.
  • If I leave the field ‘day’ blank and press the submit button, the form is not submitted, but the focus goes to the day field, for some reason.
  • If I give the focus to any field other than ‘day’, e.g. ‘other’, and press enter, the form is not submitted and the focus goes to the day field again.
  • If I give the focus to the empty day field and press enter, the form IS submitted.
  • If I comment out the line prefillTextfield( 'candidate_dateOfBirth_day', 'Day' );, everything work fine. The weird thing is that there still is a similar field which doesn’t cause any problems: year.

Is this a bug in Google Chrome or is it in my code?

    <html>
      <head>
        <title>Submit fails in Google Chrome</title>
        <script type="text/javascript" src="hidden/js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript">
          /**
            * Prefill a textfield
            */
            function prefillTextfield( id, defaultText )
            {
              var element = $( '#' + id );
              var color = 'rgb(153, 153, 153)';

              // Define focus event
              element.focus(
                function()
                {
                  if( element.css( 'color' ) == color )
                  {
                    element.val( '' );
                    element.css( { 'color': '#000' } );
                  }
                }
              );

              // Define blur event
              element.blur(
                function()
                {
                  if( element.val().length == 0 )
                  {
                    element.val( defaultText );
                    element.css( { 'color': color } );
                  }
                }
              );

              // Simulate onblur event.
              element.trigger( 'blur' );
            }

            $( document ).ready( 
              function() 
              {
                prefillTextfield( 'candidate_dateOfBirth_day', 'Day' );
                prefillTextfield( 'candidate_dateOfBirth_year', 'Year' );
              }
            );
        </script>
      </head>

      <body>
        <form onsubmit="javascript: alert( 'Submitted!' ); return false;">
          <div class="formField">
            <label name="dateOfBirth-label">Date of birth</label>
            <input type="text" class="textField" id="candidate_dateOfBirth_day" name="candidate_dateOfBirth_day" maxlength="2" style="width: 60px;" />
            <select id="candidate_dateOfBirth_month" name="candidate_dateOfBirth_month" style="width: 90px; color: #999;">
              <option value="" style="color: #999;">Month</option>
              <option value="01" style="color: #000;">January</option>
              <option value="02" style="color: #000;">February</option>
              <option value="03" style="color: #000;">March</option>
              <option value="04" style="color: #000;">April</option>
              <option value="05" style="color: #000;">May</option>
              <option value="06" style="color: #000;">June</option>
              <option value="07" style="color: #000;">July</option>
              <option value="08" style="color: #000;">August</option>
              <option value="09" style="color: #000;">September</option>
              <option value="10" style="color: #000;">October</option>
              <option value="11" style="color: #000;">November</option>
              <option value="12" style="color: #000;">December</option>
            </select>
            <input type="text" class="textField" id="candidate_dateOfBirth_year" name="candidate_dateOfBirth_year" maxlength="4" style="width: 60px;" />
          </div>
          <div class="formField">
            <label name="dateOfBirth-label">Other input field</label>
            <input type="text" class="textField" id="other" name="other" style="width: 60px;" />
          </div>
          <div class="formField">
            <label name="dateOfBirth-label">&nbsp;</label>
            <input type="submit" class="textField" value="Submit" />
          </div>
        </form>
      </body>
    </html>

Thanks in advance!

JSFiddle – here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This behaviour is caused by the word ‘Day’ which is 3 tokens whilst you are only allowing 2.

    If you replace maxlength=2 with maxlength=3, everything is fine.

    Normally, you get a native message for this in Chrome, but since you are defining a focus event yourself, this message was supressed.

    Please have a look at what happens if you do not define focus: http://jsfiddle.net/MyewW/2/

    And have a look in case you use maxlength=3: http://jsfiddle.net/MyewW/3/

    • 0