thank you for help. now the text area is working but rest do not. how can we fix it?
also added console log that is not working.thank you.
Sorry the events should be 'focusin focusout' as in your code sample.
thank you. can you help me please with console log also? thank you
What exactly do you want to log and what have you tried?
thank you for help, this is the code, so as I type in input field or text area, changing happen after every keystroke.
$('.input-group, textarea').on('focusin focusout', function (event) {
console.log('cnanged');
Well yes but so far youâre only listening to focusin and focusout events; as already pointed out earlier, if you want to monitor value changes you have to listen to input events:
$('.input-group, textarea').on('input', function () {
console.log('changed')
})
thank you, it is really good.
I would like to ask if I add some .css() jquery is it ok?
` if (value) {
$error.html('Your ' + name + ' is OK ' + value).css("color","green");
} else {
$error.html('Your '+name + ' is empty').css("color","red");
}
`
1 Like
Youâre welcome. I strongly encourage you though to carefully re-read @Paul_Wilkinsâs posts to get a better understanding what is actually going on here, and to develop an overall more structured approach. ;-)
3 Likes
Yes this is OK, but unless you need to apply dynamic values itâs a much better practice to do this via classes and keep the styling in your actual CSS files.
1 Like
ok, thank you, it lovely.
Hi m3g4p0p
applying add/removeClass(), jquery, the following code only works when typing something in the input field, when remove input content .warning class is not âworkingâ. warning text appears but red color not.
if (value) {
$error.html('Your ' + name + ' field is OK ' + value).addClass("ok").removeClass("warning");
} else {
$error.html('Your '+name + ' field is empty').addClass("warning").removeClass("ok");
}
also this is another problem
$(".button1").click(function(){
$(".form-group").each(function() {
var inputattr = $(this)
.find(".check")
.attr("name");
$(this).find(".check").css("color","red");
// Get the Login Name value and trim it
var inp = $(this).find(".check").trim();
alert("This input field has lost its focus. "+inputattr+inp);
if ( $(this).find("check").val().trim()==="") {
//inputmsg(this, inputattr);
//$(this).next(".fielderror").html(inpattr+" is EMPTY: Please enter data into this input");
//$(this).next(".fielderror").addClass('warning').removeClass('ok');
//$("form").submit(function(e){ });
//alert('submit intercepted');
//emptyfield = false;
$(this).next(".fielderror").html(inputattr + " is EMPTY: Please enter data into this input");
$(this).next(".fielderror").addClass('warning').removeClass('ok');
$(this).css("border","2px solid red");
event.preventDefault();
} else {
//inputmsg(this);
$(this).next('span').text(inputattr + " " + " is Ok");
}
});
});
clicking on submit button nothung happens.
can I apply event.target? thank you.
Do you actually have corresponding CSS rulesets for those classes?
There is no element with a class button1 in your latest markup; also youâll get a type error here:
var inp = $(this).find('.check').trim()
The find() method will return a jQuery collection not a string, you probably meant to trim() that elementâs value. You can detect such errors using with the debugger of your browser dev tools; when open, check âPause on exceptionsâ and youâll get pointed right to the line where the error occurred:
2 Likes
regarding add/removeClass I have the following css:
}
.warning {
color:red;
}
.ok {
color:green;
}
regarding form check by clicking on submit button, I placed .button1/I chaged it to btn1 to make it simple/ in button class=ââ, so as I click on submit button it should work but donât. I donât understand.
also I donât understand why ```
$(this).find(â.checkâ)
That closing curly bracket in the first line is not valid syntax, please validate your code as already suggested. oO You might also consider using a code editor that will highlight such syntax errors in place.
So the button does not have any class at all now? The selector in your JS must of course match the markup. Also there seems to be some code missing in your post; could you just put together a codepen or the like that demonstrates the issue?
this is where I use the changed button1 to btn1:
$(".btn1").click(function(){
$(".form-group").each(function()
and this is the code for button to use by clcking.
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default btn1">Submit</button>
</div>
</div>
what is expectable is by clicking on submit button, a quick check should happen to make sure no required field is sent empty, thank you
Okay then the click handler should get called. Are you getting any further errors in the console / debugger after fixing aforementioned type error? You might also try setting a breakpoint at the top of the $(".form-group").each() callback and step through the code from there; this way you can directly inspect what values your variables hold and where your code fails to work as expected.
yes, curly brakets deleted so it works fine but submit quick test donât. making tests, I realized accesing dom elements causes problem.
<div class="form-group">
<label class="control-label col-sm-3" for="pwd">
<span class="glyphicon glyphicon-star"></span> Password:</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon glyph3 email-glyph">
<i class="fa fa-lock"></i>
</span>
<input id="pwd" type="text" class="form-control check inputbgr_reg email-field" name="Password retype" placeholder="Retype Password">
</div>
<div class="inputstatus">
<span class="error">Please retype your password.</span>
<span class="feedback"></span>
</div>
</div>
</div>
jquery
).click(function(){
$(".form-group").each(function() {
var inputattr = $(this).find(".check")
.attr("name");
$(this).find(".check").css("color","red");
// Get the Login Name value and trim it
var inp = $(this).find(".check").trim();
alert("This input field has lost its focus. "+inputattr);
});
input and input name is not found, can I get help?
What do you mean with not found? If you set a breakpoint right after the inputattr assignment, what value does that variable hold? (In the debuggerâs code view you can just hover over it and youâll see the value.)
Youâre not getting the input value here though, youâre still attempting to trim() the element itself which will result in that type error.
I have never done this part, where and how to do that I have element console console network âŚ
yes ```
var inp = $(âform-groupâ).find(â.checkâ); should find input if I am right unless I misunderstood something.
In firefox itâs the Debugger panel, in chrome itâs called Sources. Hereâs a thorough guide for firefox:
https://developer.mozilla.org/en-US/docs/Tools/Debugger
And here for chrome:
And also here:
https://javascript.info/debugging-chrome
Youâre missing the dot for the class selector here, it should be .form-group. BTW if you canât set up a codepen then please try to properly format your code, the 3 backticks should be in separate lines like so:
``` code goes here ```
2 Likes