Remove input error message after click on input - javascript

I have a form where i am showing validation error below each input field.
<div class="form-group m-0">
<input type="text" class="form-control" name="address" placeholder="Address">
<i class="form-group__bar error-red address"></i>
</div>
when Ajax response have errors regarding to the input field, I shows them here <i class="form-group__bar error-red address"></i>.
What i want if that when the error shows and the user clicked on the input field i want to disappear the error message.
Is there any library for this kinda things, Cause there are many fields in the form, It will be good where we can use library for every form and field.

you can use .focusin() function. What you have to do is just give common class to each <i class="form-group__bar error-red address"></i>.
like if your common class for each <i class="form-group__bar error-red address"></i> is "form-group__bar" then you can use focusin like this.
$(".form-group input").focusin(function() {
$(this).siblings(".form-group__bar").hide()
});
this will hide error message on focus of input.
For more you can search for focusin and focusout events.

use this code no library needed just jquery which you already use
$("input").focus(function(){
$(this).siblings("i.error-red").hide();
});

Related

click() function on input field using browser console

I need to make a simulated click on input field using javascript in browser console.
The site isn't mine.
I use the code:
document.getElementById('bets-stake-amount-1').click();
I have to click the element with this ID: bets-stake-amount-1 .
I think that only option is to click with mouse button.
I have tried to change the type of the field but it not work.
<div class="bet p-1 ng-star-inserted">
<div class="bet-icons pull-right">
<a class="bet-remove ng-star-inserted">
<span class="fa fa-times" title="Rimuovi">
</span>
</a>
</div>
</div>
<div class="combis mt-2 mb-2">
<app-betslip-input grouping="1" class="ng-star-inserted">
<div class="radio p-1 ng-star-inserted">
<div class="flex-row">
<div class="input-group flex-col-7">
<input autocomplete="off" class="form-control text-right" tabindex="1" type="text" id="bets-stake-amount-1" readonly="">
<span class="input-group-addon ng-star-inserted">€
</span>
</div>
</div>
</div>
</app-betslip-input>
</div>
The output is undefined .
In IE you have to confirm ActiveX after 1st console command (in local page tested), next time it works.
In FF & Chrome works without problems, but not sure how you recognize "pass" result.
For example calling onclick in Chrome reports this error:
document.getElementById('bets-stake-amount-1').onclick()
VM49:1 Uncaught TypeError: document.getElementById(...).onclick is not a function
at :1:48
And without brackets return null as there is no method to call.
In IE you can see even focus by this command document.getElementById('bets-stake-amount-1').focus() and in FF you cannot get focus or cursor in at all. Also Chrome no change after focus, but it can show focus after entering by tab or mouse click.
According to documentation https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text, the input field responds to two possible events: input and change.
Okay, but how does this work you may ask?
Suppose that you have the following input field
<input value="0.005" autofocus="" name="price" placeholder="Amount">
All you have to do is to set a value (because this field responds to value change)
document.getElementsByName("price")[0].setAttribute("value", "10")
Then trigger the input event like this
document.getElementsByName("price")[0].dispatchEvent(new Event('input', {bubbles:true}));
This way it works to programatically launch events on input fields.
Triggering the event without setting a value will not work, because remember, the input field reacts to changes of it's value. If there is no change, no event will happen.
Hope my answer will help others.
P.S.: Always remember to read the documentation carefully. Most of the times the answer to our questions is right there :)
Have a good day!
You can simulate a click to an element (by ID) with this code
document.getElementById('elementID').click();
other option is to use this code (https://stackoverflow.com/a/2706236/7584019)
if (el.fireEvent) {
el.fireEvent('on' + etype);
} else {
var evObj = document.createEvent('Events');
evObj.initEvent(etype, true, false);
el.dispatchEvent(evObj);
}

Click off input field event in Angular JS

Suppose you have an input field in an Angular JS app
<input id="title" type="text" name="title" placeholder="enter a title" ng-model="item.title" />
I would like to display some feedback to the user about the validity of the input data AFTER the user has completed interacting with the input but I cannot think of a directive to watch the "click off" event. That is, when a user types into the form, then either tabs next or clicks anywhere else.
How do I capture the "click off and element" event.
Please note, this is in contrast to an "off-click" event, where the event refers to when a user clicks anywhere BUT a given element.
You need to use ng-blur directive.
ng-blur:
Specify custom behavior on blur event.
A blur event fires when an element has lost focus.
Note: the print you see in the ng-blur is nothing but console.log using this for convenience, refer my fiddle!
JSFiddle Demo
JS:
<div ng-controller='MyController' ng-app="myApp">
<input id="title" type="text" name="title" placeholder="enter a title" ng-model="item.title" ng-blur="print('lost focus')" />
</div>
References:
ng-blur
As mentioned in Naren's answer, ngBlur is the directive you are looking for.
However, since you're trying to implement validation, you should know that angular has built-in validation functionality that will handle the events for you and using them is a better practice than reinventing the validation 'wheel'.
Use validation directives like ngRequired, ngMinlength, ngMaxlength and ngPattern for simple validation needs.
https://docs.angularjs.org/guide/forms
Use Angular UI's uiValidate directive for custom validation including validation through asynchronous http requests.
https://github.com/angular-ui/ui-validate

How to fire ng-messages on blur?

THE SITUATION:
I have many forms in my angular app and i need an effective error messages system. I find ngMessages useful.
But i would like that the error messages appears only when the user blur out of a field, in order to be less 'aggressive'.
ATTEMPT:
Attempt using debouncing at 1000ms
<label class="item item-input">
<span class="input-label"> Email alternative </span>
<input type="email" name="email_alternative" ng-model="profile_edited.email2" ng-model-options="{ debounce: 1000 }">
</label>
<!-- Error messages for ALTERNATIVE EMAIL -->
<label class="item item-input" ng-show="profile_edit_form.email_alternative.$error.email">
<div class="form-errors" ng-messages="profile_edit_form.email_alternative.$error" role="alert" ng-if='profile_edit_form.email_alternative.$dirty'>
<div class="form-error" ng-message="email">Your email address is invalid</div>
</div>
</label>
In this way it will properly appears the error message if the user is not typing anything for one second.
Is the closest i get to what i want.
But sometimes for some users it may take a bit more than 1 second to type the character #. The error message may then suddenly appear and confuse the user.
But if i set the debouncing time 2 or 3 seconds is way too much. It may appear when the user is already writing in another field.
I need that the error messages fire ONLY AFTER the user blur out of the field.
THE QUESTION:
How can i fire ngMessages on blur?
$dirty will evaluate to true if the text is changed in the input box. To check for the blur you can use the $touched property of the input field.
Checkout the forms documentation to see all form (input) properties: https://docs.angularjs.org/guide/forms
You can use $dirty and ng-show to display messages when input is dirty.
<input type="text" name="modelName" ng-model="modelName" required />
<div ng-messages="myForm.modelName.$error" ng-show="myForm.modelName.$dirty">
<div ng-message="required">Please Fill this model.</div>
</div>

How to override Parsley JS focus behavior

When a new user comes to the page and types in an email that already exists in the system, I would like to do the following:
Show the error message.
Show the arrow.
Then move the focus(cursor)
to the Password field.
Using jQuery I'm able to move the focus to the password field, but after a few milliseconds, the focus is pulled back to the email field with the Parsley error message.
I have tried using data-parsley-focus="..." and data-parsley-no-focus, but that didn't do anything for me. I've also looked at the source code and I see that validate.focusedField.focus() is what's forcing the focus back to the field with the error, but can't quite figure out how to stop that.
So, is there a way to override this behavior?
The following code works as expected, although you might need to tweak some aspects based on your code.
What I did:
Whenever a field has an error, check if it's a specific field (field1 in my case) and, if so, do something (in this case, focus on field2 input).
Add data-parsley-focus="none" to the form to avoid auto focus on the first input with errors (behaviour by default).
$(document).ready(function() {
$.listen('parsley:field:error', function(parsleyField) {
if (parsleyField.$element.attr('name') === 'field1') {
$("input[name=field2]").focus();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.0.7/parsley.min.js"></script>
<form id="myForm" data-parsley-validate data-parsley-focus="none">
<input type="text" name="field1" required data-parsley-minlength="50" data-parsley-trigger="focusout" />
<input type="text" name="field2" required />
<input type="submit" />
</form>
If you run into some trouble, please provide a fiddle and add the relevant code to your question.

Assign the value to different field ID?

I have a form with a unique identifier field that the user needs to enter, when passing this value it needs to appear in different field id. so for instance. the field that user enters the unique code in is called "unique" and the copy needs to be in "message", how can i achieve that?
<div data-role="fieldcontain">
<label for="pins" id="pinLabel"><span style="color:#f22300">*</span> Unique Code:</label>
<input data-mini="true" name="pins_r" id="pins" placeholder="9 alphanumeric characters"/>
</div>
<input type="hidden" id="msg" name="msg" value=pins>
Thanks
There are two ways to do this with JavaScript.
Method 1)
Have an onchange event on the unique field such that whenever the value is changed, change it in a hidden field called message.
<input type="text" id="unique" name="unique" onchange="setMessage(this);">
<input type="hidden" id="message" name="message">
function setMessage(field) {
document.getElementById('message').value = field.value;
}
Method 2)
Use ajax to post the form instead, that way you can build the fields yourself.
ie. post message= document.getElementById('unique').value
Both the above are greatly improved if you use JQuery or another JS helper framework.
If you want your values to be set in the label at the same time, it is entered.
You can do some thing like this.
$(document).ready(function() {
$('#pins').keypress(function() {
setTextValueForPins(this);
});
});
function setTextValueForPins(textPin)
{
$('#pinLabel').text($('#textPin').val());
}
If you want the value to be set after the user have entered the value, you can use the change event.
PS: Not tested the code , let me know if you face any Issues.

Categories