Question

I am building a responsive form and using css media queries to update layout based on screen width.

Between the desktop view and the mobile & tablet views, the design for the form changes in that the label elements sit atop the input fields in desktop width, but then become the default input field values when the screen is reduced to mobile width.

I am running the following function to put text in the labels as a value of the input fields:
HTML:

    <div class="sectionHeader" id="updateDetails">My details <span class="sectionEdit">Edit</span></div>
        <div class="sectionWrapper" id="myDetails">
            <div class="formSection clearfix">
                <fieldset>
                    <legend>Personal</legend>
                        <div class="ctrlHolder">
                            <div class="ctrlHolder">
                                <label class="hiddenLabel" for="givenName">Given name</label>
                                <input name="givenName" id="givenName" type="text" class="text long required"/>
                            </div>
                            <div class="ctrlHolder">
                                <label class="hiddenLabel" for="familyName">Family name</label>
                                <input name="familyName" id="familyName" type="text" class="text long required"/>
                            </div>
                        </div>
                </fieldset>
            </div>
        </div>
<div class="formSectionFooter clearfix">
    <input data-target="myInvestment" class="sectionNavigator button secondary" id="sectionDetailsNext" name="sectionDetailsNext" type="button" value="Continue"/>
            </div>


$('#details .formSection fieldset .ctrlHolder label').each(function(){
   //console.log($(this).text());
   $(this).addClass('hiddenLabel');
   $(this).next('input').val($(this).text());
});
}

This is playing havoc with my client side validation as the fields are being tested for emptiness and they become full and error on the default values. Among other things the validation checks for empty fields or default values (such as ‘Select’, ‘First name’, etc)

$('.sectionNavigator').click(function(event){
    //$(this).closest('.formSection').validate();
    validateMy.form();
    event.preventDefault();

    // check for any empty fields in the preceding section
var $thisFormSection = $(this).closest('.formSection');
var $elementsWithErros = $thisFormSection.find('input[value=""]:visible, input[class="error"]:visible, select[value="Day"]:visible, select[value="Month"]:visible, select[value="Year"]:visible, select[value="Select"]:visible, select[value="Please select"]:visible, select[value="Given name"]:visible, select[value="Family name"]:visible');
var target = $(this).attr('data-target');

Does anyone have any advice on how to approach this?

Answer 1

So basically you want the field to be treated as “empty” if it has the default value and hasn’t been edited by the user.

First, you can use the placeholder attribute instead of setting the val. It’s now supported by most of the mobile browsers and shouldn’t brush up against your validation. For the cases where it’s not supported—and if you’re going to go this route, make sure you only do this in browsers where it’s not supported—you can track which fields have been edited. When performing your validation, if a field has been edited and is the default value, then that’s an error. Otherwise you can just assume it’s empty.

Just want to say, I think that validation (‘no default values’) is unnecessary, especially since you’re talking about mobile devices and the additional cost of performing this logic is probably just not worth it.