Adding css style into javascript

Question

What's the proper syntax to add css into the below script in the if condition?

function validateEmail(emailField){
        var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

        if (reg.test(emailField.value) == false) 
        {
            alert('Invalid Email Address');
            return false;
        }

        return true;

what do you mean *add css*. Do you mean change the styling of an HTML element? — AmmarCSE, Sep 14 '15 at 22:50
I think you meant regex, not CSS style. css style is something like font-size, background-color, etc. You just want to validate email address with javascript. — Saehun Sean Oh, Sep 14 '15 at 22:52
possible duplicate of [Validate email address in JavaScript?](http://stackoverflow.com/questions/46155/validate-email-address-in-javascript) — Saehun Sean Oh, Sep 14 '15 at 22:53
@SaehunSeanOh no i meant css.. trying to add a color effect to the input field based on the outcome of the if condition — dan, Sep 14 '15 at 22:53
@SaehunSeanOh sorry but didn't want to know a specific thing..Just wanted to know the general concept, for future use. — dan, Sep 14 '15 at 22:55
This may help you find what you're looking for: http://www.w3schools.com/js/js_htmldom_css.asp — Antonio Dangond, Sep 14 '15 at 22:55
[HTML5 Form Validation](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation) — epascarello, Sep 14 '15 at 23:18

score 2 · Answer 1 · answered Sep 14 '15 at 22:58

Create a span with an id

<span id="emailMsg">Wrong Email format</span>

and you can do this in your script

function validateEmail(emailField){
    var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

    if (reg.test(emailField.value) == false) 
    {
        document.getElementById('emailMsg').style.color = '#FF0000';
        return false;
    }

    return true;

Note that I didn't validate your regex. I simply added javascript that changes color.

score -1 · Answer 2 · answered Sep 14 '15 at 23:11

-1

Using JQuery, you can easily modify any element using .css(), in this case by specifying

$(emailField).css('color', '#F00');

answered Sep 14 '15 at 23:11

user0934

126
9

Where is the jQuery tag? – epascarello Sep 14 '15 at 23:16

Adding css style into javascript

2 Answers2