How can I add a JS variable into error message and keep one font ID tag

Question

I have a form with the following error message. This error message functions properly, so I'm sharing that first then showing what I'm trying to change next:

 if (thing is true) { $(this).parents("table:first") .prop("disabled",true) .css({'background-color' : 'lightgray'}) .after("<font color = red id=error3><strong>*</strong> Please check that your start and end dates are between June 15, 2018 and November 30, 2019. The Start Date may not be greater than the End Date.</font>"); } 

I want to change the error message to include dates provider by the user earlier in the form. When I use concatenation, it looks like this:

 if (thing is true) { // example dates provided by user cysd = $("#id_currentyearstartdate").val(); cyed = $("#id_currentyearenddate").val(); // let's say cysd is January 1, 2018 and cyed is December 31, 2018 $("input#next-submit-button") .prop("disabled",true) .css({'background-color' : 'lightgray'}) .after("<font color = red id=error2><br>Please resolve any errors above before continuing. <br><strong>*</strong> Check that your start and end dates are between </font>" + cysd + "<font color = red id=error2> and </font>" + cyed + "<font color = red id=error2>. The Start Date may not be greater than the End Date.</font>"); 

Where I messed up is that, in the original error message, I had a single error message with the font id "error2." This allowed me to easily add or remove the error message on the right conditions.

I don't know how to include the variable values within the actual error message text or font tag, so that when id=error2 will still refer to the entire string "Please check that your start and end dates are between January 1, 2018 and December 31, 2018. The Start Date may not be greater than the End Date.

Answer 1

You can use a Template Literal and put variable values into your strings using dollar sign and curly braces. Eg: ${cysd}

$("input#next-submit-button")
.prop("disabled",true)
.css({'background-color' : 'lightgray'})
.after(`<font color="red" id="error2"><br>Please resolve any errors above before continuing. <br><strong>*</strong> Check that your start and end dates are between ${cysd} and ${cyed}. The Start Date may not be greater than the End Date.</font>`);

Answer 2

Just put it in the same tag...

.after("<font color = red id=error2><br>Please resolve any errors above before continuing. <br><strong>*</strong> Check that your start and end dates are between " + cysd + ". The Start Date may not be greater than the End Date.</font>");

You could alternatively use template literals instead of concating which is a little easier because you don't have to worry abut mixing up your quotes. Wrap your string in backticks (`) and put your variables in curlies preceeded by a $ .

.after(`<font color = red id=error2><br>Please resolve any errors above before continuing. <br><strong>*</strong> Check that your start and end dates are between ${cysd}. The Start Date may not be greater than the End Date.</font>`);

Either way tho, you should not be using font tags - they're obsolete . Use css and span tags instead.

.after(`<span style=color:red id=error2><br>Please resolve any errors above before continuing. <br><strong>*</strong> Check that your start and end dates are between ${cysd}. The Start Date may not be greater than the End Date.</span>`);

Answer 3

Why don't you wrap the whole message in a div with id="error2" :

<style>
    #error2 {
        color: 'red'
    }

    .error_date {
        color: 'blue'
    }
</style>

$("input#submit-button")
    .prop("disabled",true)
    .after("<div id='error2'>" +
        "Please resolve any errors above before continuing.<br/>" +
        "<strong>*</strong> Check that your start and end dates are between <span class='error_date'>" + cysd + "</span> and <span class='error_date'>" + cyed + "</span>." +
        "The Start Date may not be greater than the End Date.</div>");