Jquery addClass() on a input field not working

Question

I have the following css:

.error .form-inline{ border-color: #a94442; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); }

and the following function:

function myFunction() {
   if (year_value == "" && monthDay_value == "" && char_value == "" && rest_value == ""){ 
            alert("ERROR");
            $(':text').addClass("error");
            document.getElementById("AuthStatus").focus();
   }
}

What I am trying to achieve is when the user enters wrong data in the input fields, to highlight the input where the user input the wrong info. However, the addClass() appears to not work correctly. I also change the css to target the input fields as well but it doesnt work either:

.error input[type="text"]{ border-color: #a94442; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); }

I am not sure what I am doing wrong. Any help would be appreciated.

Here is the form:

            <div class="override_panel-body mobileAdjustments">
            <form class="form-inline" id="AuthStatus">
                <div class="background-color form-group">
                    <div class="padding1"><h3 class="fontWeight">Stay Informed</h3></div>
                        <p style="padding-left:6px !important;">
                            Lorem ipsum dolor sit amet, ei ubique disputando mea, sit in duis aliquip vivendo. Cum at justo facilisis. His ad nisl reprimique, eos no liber suscipit. Ex sed viderer phaedrum.
                        </p>
                        <div class="input-group panel-body" style="padding-left:6px !important;">
                            <input id="year" type="text" class="" placeholder="XXXX" aria-describedby="basic-addon1" />
                            <input id="monthDay" type="text" class="" placeholder="XXXX" aria-describedby="basic-addon2" />
                            <input id="char" type="text" class="" placeholder="XXXX" aria-describedby="basic-addon3" />
                            <input id="rest" type="text" class="" placeholder="XXXX" aria-describedby="basic-addon4" />
                            <div class="form-group">
                                <input id ="auth"  class="override_btn btn-info btn-block adjustments" type="submit" value="Submit" onclick="myFunction()" />
                            </div>
                            <div class="form-group">
                                <input id="clear" class="btn btn-light clear" onclick="ClearForm()" type="button" value="Clear" />
                            </div>
                        </div>
                        <p class="pddingBottom" style="padding-left:6px !important;">
                            Don't have an authorization number? Contact your doctor to get a copy.
                        </p>
                </div>
                <h3 class="fontWeight">FAQ</h3>
                <p>
                    Lorem ipsum dolor sit amet, ei ubique disputando mea, sit in duis aliquip vivendo. Cum at justo facilisis. His ad nisl reprimique, eos no liber suscipit. Ex sed viderer phaedrum.
                </p>
            </form>
        </div>

Marcelo Agimóvel · Answer 1 · 2018-03-23T18:23:43.833

1

You can use HTML5:

<input id="year" type="text" class="" placeholder="XXXX" required>

You can check with Jquery in another way:

<input id="year" type="text" placeholder="XXXX">
<script>
$('#year').on('blur',function(){
if($('#year').val()==''){ 
    $('#year').addClass('yourClassName');
}else{
    $('#year').removeClass('yourClassName');
});
</script>

If you need a simple validate function, use HTML5. And remember to validate in the backend as well.

UPDATE1

I just checked your submit button with "onclick" event. Please, use events outside HTML, it will keep it more organized and with better performance.

UPDATE2 and 3 A better answer:

<script>
$(function(){
$('#AuthStatus').on('submit'){
    var errors = 0;
    $("#AuthStatus :input").map(function(){
         if( !$(this).val() ) {
              $(this).addClass('warning');
              errors++;
        } else if ($(this).val()) {
              $(this).removeClass('warning');
        }   
    });
    if(errors > 0){
        $('#errorwarn').text("All fields are required");
        return false;
    }
}

});

Not tested. Note: remove the "onclick" on submit button. Full answer here.

edited Mar 23 '18 at 18:23

answered Mar 23 '18 at 17:43

Marcelo Agimóvel

1,668
2
20
25

@ Marcelo Agimovel: I am not able to use HTML5 do to the clients I work for are using a older version of IE :/. – Roberto Flores Mar 23 '18 at 17:48
@RobertoFlores you can use the second option, and actually improve it to avoid several codes to do the same thing. – Marcelo Agimóvel Mar 23 '18 at 17:50
@ Marcelo: I have tired that approach as well and it still not working. Not sure what is going on. I added it in my function and out of my function – Roberto Flores Mar 23 '18 at 17:53
@ Marcelo: Still not working. Not sure what the "td" is for, but I assume for a table so replace that with input. Yeah, this approach is not valid, at least for me – Roberto Flores Mar 23 '18 at 18:11
Ill updat one last time, but's all about you adapt the code. – Marcelo Agimóvel Mar 23 '18 at 18:23
@ Marcelo: I did. Thats the frustrating part – Roberto Flores Mar 23 '18 at 18:46

Johannes · Answer 2 · 2018-03-23T17:44:17.510

0

The CSS selector (although actually you shouldn't need this) should be

input[type="text"].error  { ... }`

(the error class is applied to the input element),

and the jQuery selector should be

$('input[type=text]').addClass("error");

edited Mar 23 '18 at 17:44

answered Mar 23 '18 at 17:39

Johannes

64,305
18
73
130

@ Johannes: I have tried your approach as well and it still not working. I know I can do it with the DOM but it isnt the same styling – Roberto Flores Mar 23 '18 at 17:49
@RobertoFlores You should not downvote this answer. It's correct. There are other errors in your code, like the undefined variables in the conditional of your function. – Andrew Magill Mar 23 '18 at 19:49
@AyexeM: I didnt down vote this answer and those are defined. Do apologize for not adding all of my code. I thought it would be better to just put what was needed. – Roberto Flores Mar 23 '18 at 20:33

Jquery addClass() on a input field not working

2 Answers2