Menu icon Foundation
Error state color

Hi there

I have two forms which I change the error state color below, but the strangest thing is that only the #partnerRegistrationForm error state color changes? I also separated them but no luck. Any ideas as to why this is happening?

Thanks!

#partnerRegistrationForm,#preSignupForm{ 
    small.error{
    background-color: $primary-color;
    text-align:left;
    }
}
            

         

Error state color forms error

Hi there

I have two forms which I change the error state color below, but the strangest thing is that only the #partnerRegistrationForm error state color changes? I also separated them but no luck. Any ideas as to why this is happening?

Thanks!

#partnerRegistrationForm,#preSignupForm{ 
    small.error{
    background-color: $primary-color;
    text-align:left;
    }
}
            

         
Andy Wallace over 3 years ago

Anina,

Can you paste the HTML that you are applying these id/classes to?

It's impossible to say for sure, but I suspect there is some other style/class on the #preSignupForm which is overriding your definition above. Or, the 'error' class is not being applied to the fields you expect/

Anina over 3 years ago

Hi Andy

Thanks for the reply. See my form HTML below:
this is the link: http://staging.groomingme.edged.co.za/keep-me-posted

 <form id="#preSignupForm" data-abide="ajax" onsubmit="return false;">
            <p><center><img src="{{ asset( '/img/logo.png' ) }}"><br>
            Provide your details and receive the latest update</center></p> 
                <div class="row">
                    <div class="large-4 medium-4 small-12 small-centered columns">
                        <label>
                            First Name
                            <input type="text" name="firstName" id="firstName" placeholder="First Name" required/>
                        </label>
                        <small class="error">Provide your first name</small>
                    </div>
                </div>

                <div class="row">
                    <div class="large-4 medium-4 small-12 small-centered columns">
                        <label>
                            Last Name
                            <input type="text" name="lastName" id="lastName" placeholder="Last Name" required/>
                        </label>
                        <small class="error">Provide your last name</small>
                    </div>
                </div>

                <div class="row">
                    <div class="large-4 medium-4 small-12 small-centered columns">
                        <label>
                            Email Address
                            <input type="text" name="email" id="email" placeholder="example@address.com" required/>
                        </label>
                        <small class="error">Provide a valid email address</small>
                    </div>
                </div>   

                <div class="row">
                    <div class="large-4 medium-4 small-12 small-centered columns">
                        <label>
                            Choose your level of interest


                            <select name="type" id="type">
                            {% set datas = [{'type':'Business'} ,{'type':'Personal'} ,{'type':'Both'} ] %}
                                {% for data in datas %}
                                    <option value="{{ data.type }}" {{selected(customer.type, data.type )}}>{{ data.type }}</option>
                                {% endfor %}
                            </select>
                        </label>
                        <small class="error">Provide a valid option</small>
                    </div>
                </div> 

                <div class="row">
                    <div class="large-4 medium-4 small-12 small-centered columns">
                        <input name="autoRegisterMe" id="autoRegisterMe" type="checkbox">
                        <label for="autoRegisterMe">Auto register me when product launches.</label>
                    </div>
                </div> 

                <div class="row">
                    <div class="large-4 medium-4 small-12 small-centered columns"> 
                        <center><a id="btnSubmit" role="button" aria-label="submit form" href="#" class="button custom tiny">Yes, count me in!</a></center>
                    </div>
                </div>               
            </form>

Andy Wallace over 3 years ago

Firstly, you shouldn't include the # on your id attribute in the HTML:

<form id="#preSignupForm"

should be

<form id="preSignupForm"

Also, your CSS has a definition for #PreSignupForm, and you're using lowercase 'p' in your HTML (#preSignupForm)

Anina over 3 years ago

Fantastic! This works perfect now!