Parsley: How NOT to validate on certain events - javascript

I want to trigger the parsley-error on an input text field only at the time of 'focus out' and not on change event.
These are the steps I perform to produce the issue:
Enter some invalid characters in the text field. At this point of
time, the parsley-error is not trigerred (OK, as per my
requirements).
When I tab-out of the field, the parsley-error is trigerred and I
see the error on the tooltip of the text box (OK, as per my
requirements).
Now, when I again go back to the same text field and start entering
some more characters, the parsley error is trigerred (This is the
ISSUE).
I don't want the user to be bugged by the error appearing on the tooltip while he is making the changes. The error should be appeared only at the time of focus out but on this third step, the error is appearing at the time of 'change' as well.
I am not sure how can I tell Parsley to avoid some certain triggers!
Any suggestion?
Please note that the issue is not faced on the first step. The issue is faced only at the 3rd step mentioned above.
Here is my code:
<input type="text" class="form-control border-radius-6 onClickHideError"
id="passport_number" name="passport_number" required=""
maxlength="30"
placeholder=""
data-parsley-password-field="true"
data-parsley-trigger="focusout"
data-parsley-pattern="/^[a-zA-Z0-9]*$/"
data-parsley-required-message="${commonRequiredMsg}"
data-parsley-pattern-message="${passportInvalidMsg}"
autocomplete="off">

Parsley allows you to set data-parsley-trigger-after-failure to your choosing.

Related

Choosing the right Time control for suggestions(onClick) [SAPUI5]

I am looking for a time control which can provide suggestions of certain times but
It should provide suggestions onclick, i.e. you click the field and suggestions are showcased as a list, not that you have to type in something.
What i have found: Input with type="Time"
<Input type="Time" suggest="onSuggestTime"/>
Issue: it delievers suggestions when you type something in, i need for it to be onclick, as you click the input field your recieve your suggestions

opening ngx-bootstrap typeahead on focus

Is there any way to open the ngx-typeahead when a user enters the input. In other words, on focus
I can get the dropdown to open if I type a single character into the input box, and then hit backspace.
just add this to the input
[typeaheadMinLength]="0"
Setting [typeaheadMinLength]="0" is the way to do this, but it also has the side effect of triggering a search even when nothing is typed in yet. I my case I needed to run the search on focus, but only if the textbox already had some content. I did this using a reference to the input's value:
<input #searchBox
[typeaheadMinLength]="searchBox.value?.length > 0 ? 0 : 1"
/>
You will need to do two things to make this possible:
First, set [typeaheadMinLength]="0" to have the input open when nothing has been typed yet.
Secondly, since the type ahead input is the first field in the form, you may need to add a small delay by also setting [typeaheadWaitMs]="300 (or some value). This is because the input may receive focus before the values are available.
Example:

HTML input pattern customizing validation message causes error

Fiddle:
https://jsfiddle.net/v45hrqs1/7/
So, I build a small form in HTML using pattern attribute to check if a valid filename is given. Its working, so when I input something like filename/ and press enter, this will be caught an I get the message "Please match the request format".
Then I wanted a more customized message so I added the javascript part. Now, when I input a invalid filename and press enter, the new message will be shown, so far so good.
HOWEVER, when I now change the filename to a valid one, I still get the error message.
What did I do wrong? My idea is after I change the filename, var input is not updated. But I have no idea how to fix this.
You don't necessarily need JavaScript for this. You can just set the validity checks on the input themselves like this:
<input type="text" class="form-control" id="packet_name" name="packet_name" pattern="[^\\/:\x22*?<>|]+" oninvalid="setCustomValidity('Invalid character in name:\n \ / : * ? < >.')" oninput="setCustomValidity('')" maxlength="100" required>
And oninput will clear out the custom validity so it will be re-evaluated when it is changed.

HTML5 Browser Validation - 1 form, 2 buttons, need to change validation

I have a form with two buttons - one is a "submit" button at the end of the form, and in the middle of the form I have an "Add" button that uses Javascript to add hidden input elements within the form whenever it's clicked.
Here are the two input fields/add button:
<input name="name" required>
<input name="email" required type="email">
<button type="submit">Add</button>
And then another set of input fields:
<input name="title" required>
<button type="submit">Submit</button>
And these are all within one form.
I want HTML5 browser validation to fire on the "name" and "email" fields when I click "Add" (but not the "title" field) and the browser validation to fire on the "title" field (but not the "name" and "input" fields) when I click "Submit." Is there any way to accomplish this?
You can add or remove attribute "required" to the fields to which you required by
$('#field_id').attr('required','true');
$('#field_id').removeAttr('required');
Is there any particular reason that you want to use HTML5 to validate your form in the first place? I feel like what you need would be easily accomplished using Javascript, and you noted that your add button would be using javascript anyway. Also, why would your form validation to be partitioned in such an odd way?
I don't even like the HTML5 validation in the first place. For example, if you type in "asdf#1" into an HTML5 email input, it will accept it. Now, you can make the argument that that's technically a valid email address, but I think in practice most people would agree that they wouldn't accept that as a valid email address. You could use an IP address in place of the domain but I highly doubt that you could use that as an email to log into any modern web page.
But I digress. To answer your question, you could write a quick function with JQuery that would override the form validation based on which button was clicked. You would do this by catching the "invalid" error thrown by the HTML5 validation for that particular input and returning false to get around it. Therefore, when you clicked submit you could override the name and email form validation, and vice versa for when you click the add button. Again, I have no idea why you would want to do this but it is a solution.
The only way I see is to set the required attributes (or: properties) dynamically on-click.
Or you can add and remove event listeners for invalid, which seem to suppress the native "missing"/"wrong format" notice - even if they do nothing (like preventDefaultAction or so).
I also tried buttons with the formnovalidate attribute and manually checkValidity() on the elected elements, but even though that fires "invalid"-events no native dialogue is shown and the submit is not cancelled. (tested everything with opera)

this.select() and JavaScript events on forms

I have a form box that I want to be always selected. I was able to get it to select everything in the box when it is clicked (using onFocus="this.select()") but I want it to be selected 100% of the time. The text in the box will be always changing, so I tried using onChange="this.select()" but that didn't work. Here's what I have:
<form>
<input type="text" id="txt1" size="30" maxlength="1"
onkeyup="showHint(this.value)" onFocus="this.select()" onBlur="this.select()"
onChange="this.select()" value="Click here, then press a key"/>
</form>
Basically I just tried to call everything in hopes that something would work, but it is still acting as if only onFocus="this.select()" is there. By the way, this is for controlling something via keyboard, which is why the maxlength is only 1. I want it to be always selected so that when new key are pressed, the last command will be changed without having to use backspace.
Is there a reason you aren't just using document keystroke detection? If you need the value to appear in the input field for some reason, once you detect the keystroke, you could fill the text box. This would be much simpler than trying to maintain focus on the field itself.

Categories