CODEWITHSUNDEEP
javascriptphphtmlcss
artasena
artasena

Reputation: 51

Styling CSS Text Inside Function in Javascript

How do I style text in JavaScript? The text is inside a function. I'm not sure how to do this.

I just want to give a class css to text. See guidance like this <div class="btn btn-primary>See Guidance</div>.

So I could change like padding, text color and background and it will be displayed like a button.

I'm just trying to put inside div between but nothing shows :(.

Here is the code :

<script type="text/javascript">
        function validateFormLogin()
        {
            var min_length = <?php echo Min_Character;?>;
            var max_length = <?php echo Max_Character;?>;
            var error_message = "";

            var val_length = $("#username").val().length;
            if(val_length > 0)
            {
                if(val_length <  min_length )
                {
                    error_message = "Wrong Minimum Character! - <a href='http://localhost/guidance>See Guidance</a>.;
                    $("#result").html(error_message);
                    return false;
                }
                if(val_length  > max_length)
                {
                    error_message = ""Wrong Minimum Character! - <a href='http://localhost/guidance>See Guidance</a>. ";
                    $("#result").html(error_message);
                    return false;
                }
                success_message = "Please wait...";
                $("#result").text(success_message);
                return true;
            }
            else
            {
                error_message = "This field is required ";
                $("#result").text(error_message);
                return false;
            }
        }
</script>

Upvotes: 0

Views: 663

Answers (2)

Saral
Saral

Reputation: 1160

The first answer may help but has syntax errors. So I thought to remove all syntax errors.

First the PHP variables you are using in your JavaScript do not start with $ sign. If they are constants, it's fine but make sure to add $ if they are variables. I'm thinking they are variables in the following code and they are defined.

Second errors are poor quotation marks and I've fixed all of them:

function validateFormLogin()
    {
        var error_message, success_message;
        var min_length = <?php echo $Min_Character;?>;
        var max_length = <?php echo $Max_Character;?>;


        var val_length = $("#username").val().length;
        if(val_length > 0)
        {
            if(val_length <  min_length)
            {
                error_message = '<p class="error">Wrong Minimum Character! - <a href="http://localhost/guidance">See Guidance</a>.</p>';
                $("#result").html(error_message);
                return false;
            }
            if(val_length  > max_length)
            {
                error_message = '<p class="error"> Wrong Minimum Character! - <a href="http://localhost/guidance">See Guidance</a>.</p>';
                $("#result").html(error_message);
                return false;
            }
            success_message = '<p class="success">Please wait...</p>';
            $("#result").html(success_message);
            return true;
        }
        else
        {
            error_message = '<p class="error">This field is required</p>';
            $("#result").html(error_message);
            return false;
        }
    }

I've also declared the variable success_message which was not declared.

Upvotes: 0

jrswgtr
jrswgtr

Reputation: 2379

Wrap the message in a <span> with a class on it. There was multiple syntax errors in your code. Too much quotes and wrong closing of attributes inside the message strings. (compare my code with yours).

<script type="text/javascript">
    function validateFormLogin()
    {
        var min_length = <?php echo Min_Character;?>;
        var max_length = <?php echo Max_Character;?>;
        var error_message = "";

        var val_length = $("#username").val().length;
        if(val_length > 0)
        {
            if(val_length <  min_length )
            {
                error_message = "<span class=\"error-message\">Wrong Minimum Character! - <a href='http://localhost/guidance'>See Guidance</a></span>;
                $("#result").html(error_message);
                return false;
            }
            if(val_length  > max_length)
            {
                error_message = "<span class=\"error-message\">Wrong Minimum Character! - <a href='http://localhost/guidance'>See Guidance</a>.</span>";
                $("#result").html(error_message);
                return false;
            }
            var success_message = "<span class=\"success-message\">Please wait...</span>";
            $("#result").html(success_message);
            return true;
        }
        else
        {
            error_message = "<span class=\"error-message\">This field is required</span>";
            $("#result").html(error_message);
            return false;
        }
    }
</script>

Upvotes: 1

Related Questions