CODEWITHSUNDEEP
javascriptjquery
frshjb373
frshjb373

Reputation: 627

add a class to parent element based on child class - inside of a submit event

Trying to target only parent divs that have child with class="has-error"

I'm using the following, but scope inside of conditional is referring to #pdf-form. Please advise how to fix.

JS:

$( "#pdf-form" ).submit(function( event ) {
    if ($(".form-control").hasClass("has-error")) {
        $(this).parent().addClass('has-error');
    }
    event.preventDefault();
});

HTML:

<form action="http://example.com" accept-charset="utf-8" id="pdf-form" enctype="multipart/form-data" method="post" novalidate="novalidate">
    <div style="display:none">
        <input type="hidden" name="params_id" value="363">
        <input type="hidden" name="csrf_token" value="668186205c07bd680af53ba2f5f05ca78143a43d">
    </div>
    <div class="form-group">
        <label for="email" class="control-label">Email</label>
        <input type="text" name="email" value="" id="freeform_email" maxlength="150" class="form-control has-error" required="" aria-required="true" aria-describedby="freeform_email-error" aria-invalid="true">
        <div id="freeform_email-error" class="has-error">Please Enter a Valid Email Address</div>
    </div>
    <div class="form-group">
        <label for="first_name" class="control-label">Name</label>
        <div class="row">
            <div class="col-sm-6">
                <input type="text" name="first_name" value="" id="freeform_first_name" maxlength="150" class="form-control" placeholder="Your first name">
            </div>
            <div class="clearfix visible-xs" style="height: 10px;"></div>
            <div class="col-sm-6">
                <input type="text" name="last_name" value="" id="last_name" maxlength="150" class="form-control" placeholder="Your last name">
            </div>
        </div>
    </div>
    <div class="form-group hidden"> 
        <label class="control-label">report</label>
        <input type="file" name="report[0]" value="" id="freeform_report0">
    </div>
    <input type="hidden" name="pdf_press_entries" value="77|8">
    <input type="hidden" name="pdf_press_template" value="site/email_pdf_report">
    <input type="hidden" name="pdf_press_upload_fieldname" value="report">
    <input type="hidden" name="pdf_press_filename_fieldname" value="report_filename">
    <p><input type="submit" name="submit" value="Submit" class="btn btn-primary"></p>
</form>

Upvotes: 1

Views: 140

Answers (2)

Scott Marcus
Scott Marcus

Reputation: 65806

It's still unclear exactly what you are looking for. I suspect your initial setup is not quite correct, but this should give you an idea of how to access the parent elements that contain error controls.

It won't work here in the Stack Overflow snippet environment, because they disable submit events, but you can see it working here. I added an additional class to illustrate what is getting selected when you click submit.

$( "#pdf-form" ).submit(function( event ) {
   
    var $errorElements = $(".form-control.has-error");

    $errorElements.parent().addClass('added-error');
    
    // If there are error elements, don't submit the form
    $errorElements.length > 0 ? event.preventDefault() : ""; 

});
.has-error { background:red; }
.added-error { border:2px solid black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="http://example.com" accept-charset="utf-8" id="pdf-form" enctype="multipart/form-data" method="post" novalidate="novalidate">
    <div style="display:none">
        <input type="hidden" name="params_id" value="363">
        <input type="hidden" name="csrf_token" value="668186205c07bd680af53ba2f5f05ca78143a43d">
    </div>
    <div class="form-group">
        <label for="email" class="control-label">Email</label>
        <input type="text" name="email" value="" id="freeform_email" maxlength="150" class="form-control has-error" required="" aria-required="true" aria-describedby="freeform_email-error" aria-invalid="true">
        <div id="freeform_email-error" class="has-error">Please Enter a Valid Email Address</div>
    </div>
    <div class="form-group">
        <label for="first_name" class="control-label">Name</label>
        <div class="row">
            <div class="col-sm-6">
                <input type="text" name="first_name" value="" id="freeform_first_name" maxlength="150" class="form-control" placeholder="Your first name">
            </div>
            <div class="clearfix visible-xs" style="height: 10px;"></div>
            <div class="col-sm-6">
                <input type="text" name="last_name" value="" id="last_name" maxlength="150" class="form-control" placeholder="Your last name">
            </div>
        </div>
    </div>
    <div class="form-group hidden"> 
        <label class="control-label">report</label>
        <input type="file" name="report[0]" value="" id="freeform_report0">
    </div>
    <input type="hidden" name="pdf_press_entries" value="77|8">
    <input type="hidden" name="pdf_press_template" value="site/email_pdf_report">
    <input type="hidden" name="pdf_press_upload_fieldname" value="report">
    <input type="hidden" name="pdf_press_filename_fieldname" value="report_filename">
    <p><input type="submit" name="submit" value="Submit" class="btn btn-primary"></p>
</form>

Upvotes: 1

Vanquished Wombat
Vanquished Wombat

Reputation: 9525

To cancel the submit it appears, based on your example, that you need to detect if any form-control elements have the has-error class. Then, to set the has-error on the class on the parents of those form-control elements you need to use the .each() approach instead of the if you have tried.

Something like this: 

$( "#pdf-form" ).submit(function( event ) {
    if ($(".form-control").hasClass("has-error").length > 0){
        event.preventDefault();
    } 
    $(".form-control").hasClass("has-error").each(function() {
        $(this).parent().addClass('has-error');
    }
});

Upvotes: 0

Related Questions