CODEWITHSUNDEEP
javascriptjqueryhtml
ReynierPM
ReynierPM

Reputation: 18670

Append text if validation fails but not repeat every time

I've this HTML code:

<div class="form-group">
    <select class="country form-control" required="required" name="fos_user_registration_form[country]" id="fos_user_registration_form_country">
        ....
    </select>
</div>

Then in my jQuery code I have a condition, if it fails, then I append some HTML to the SELECT element as follow:

$(".country").on('change', function() {
    country = $(this).find('option:selected').val();
    $.get(Routing.generate('states', {country_id: country})).success(function(data) {
        if (data.message === "") {
            $('.state').empty().append('<option value="-1">Choose state</option>');
            $.each(data.entities, function(i, d) {
                $('.state').append('<option value="' + d.id + '">' + d.name + '</option>');
            });
            $('.state').removeAttr('disabled');
        } else {
            $('.country').after('<span class="help-block">' + data.message + '</span>');
        }
    }).error(function(data, status, headers, config) {
        if (status == '500') {
            message = "No connection";
        }
    });
});

This output something like this:

<div class="form-group">
    <select class="country form-control" required="required" name="fos_user_registration_form[country]" id="fos_user_registration_form_country">
        ....
    </select>
    <span class="help-block">Some text goes here</span>
</div>

But any time I change the select and condition fails <span> is repeat once and once producing this:

<div class="form-group">
    <select class="country form-control" required="required" name="fos_user_registration_form[country]" id="fos_user_registration_form_country">
        ....
    </select>
    <span class="help-block">Some text goes here</span>
    <span class="help-block">Some text goes here</span>
    <span class="help-block">Some text goes here</span>
    <span class="help-block">Some text goes here</span>
    <span class="help-block">Some text goes here</span>
</div>

When should be just one time, what I need to do to fix that?

Also how I add a class to <div class="form-group"> since this is not the only DIV with that class and applying to $('.form-group') will add to all the DIVs on the page, any advice?

Upvotes: 1

Views: 263

Answers (3)

MH2K9
MH2K9

Reputation: 12039

You can use simply a flag for keeping track. something like this

var flag = 0;//declare globally
if(... && flag == 0){
    //your scripts
    flag++;
}

Upvotes: 1

grammar
grammar

Reputation: 871

Firstly, to select only this particular "form-group" you will need to add another type of identifier to the markup. This can either be another class name, or perhaps an id, like so:

<div class="form-group" id="form-group-country">
    ...
</div>

Then you'd be able to single out this <div> easily in jQuery like this:

// Store the form-group wrapper for the states <select>
var $formGroupCountry = $('#form-group-country');

To answer your question about only adding the span once, you will want to keep some kind of flag to know that the error has already been added to the DOM. This should work:

var hasErrorBeenAdded = false;
$(".country").on('change', function() {
    country = $(this).find('option:selected').val();
    $.get(Routing.generate('states', {country_id: country})).success(function(data) {
        if (data.message === "") {
            $('.state').empty().append('<option value="-1">Choose state</option>');
            $.each(data.entities, function(i, d) {
                $('.state').append('<option value="' + d.id + '">' + d.name + '</option>');
            });
            $('.state').removeAttr('disabled');
        } else if($('.country .help-block').length==0 && !hasErrorBeenAdded) {
            $('.country').after('<span class="help-block">' + data.message + '</span>');
            hasErrorBeenAdded = true;
        }
    }).error(function(data, status, headers, config) {
        if (status == '500') {
            message = "No connection";
        }
    });
});

Hope this helps.

Upvotes: 2

Islam El-Khayat
Islam El-Khayat

Reputation: 416

You should try to remove the span first if already exists

$(this).next('.help-block').remove()

To add class to the current parent div only, use parent

$(this).parent('.form-group').addClass('newClass');

Upvotes: 1

Related Questions