jQuery validation - int field validation sometimes doesn't work - javascript

On my website, I have a form that includes CKEditor, and input field for numeric value. Now, sometimes, when I try to submit form, validator is saying, that numeric input field is not in a proper range. The problem is, that the range is set to 1-1000, and I am setting the value that is within this range. So it is totally ignoring my input and assuming that there is nothing. The main problem with that behavior is, that most of the times this works okay (I mean it is validating correctly). But like 10% of the times, it is doing those weird things, and console is throwing no errors... Has anyone had similar problems?
Is it maybe possible to turn off jquery validation for single input field?
Edit: here is my input field:
<input class="text-box single-line" data-val="true" data-val-number="The field Price must be a number." data-val-range="The field Price must be between 1 and 1000." data-val-range-max="1000" data-val-range-min="1" data-val-required="The Price field is required." id="Price" name="Price" type="number" value="0">

Looks like an mvc input to me. I would assume you are using this somewhere: #Html.ValidationFor( m => m.Price ) which you may omit if you wish to remove validation altogether.
If that is not the case, then just remove the data-annotations from the element
<input id="Price" name="Price" value="0" />
However, I think you should also consider allowing the range to be 0-100 or setting the initial value at 1. The reason being that as it stands now if someone clicks submit without making an entry, then the value of the field will be 0, and that will fail the range validation of 1-100.

Related

Adjusting dynamic input fields when changing the type of the input field

I have a little challenge when testing a website. Just wanted to see if you folks have any suggestions on this. The story behind this is that I need to mask the input fields for the screenshots when the test has been executed as we are sharing the data with other teams. Before the script I am running JS with 'document***.type="password";', but when script starts to type, then input type is changed back to the type of text. Also, class changes from class="is-invalid" to class="is-focused is-invalid" when it's active. Also, I could of course change the type after I have typed the value, but even tho when I click the next field, the class changes. When I have filled the first input field it checks the data against the server and the class is of course changed.
I have an input field when inactive:
<input ref="input" value="input field" id="id-for-unified-text-input--14fe" name="unified-text-input-14fe" type="text" autocomplete="off" spellcheck="false" placeholder="ABC123" class="is-invalid">
And the input field when active"
<input ref="input" value="input field" id="id-for-unified-text-input--14fe" name="unified-text-input-14fe" type="text" autocomplete="off" spellcheck="false" placeholder="ABC123" class="is-focused is-invalid">
Any suggestions from a fellow testers, how could I fix this? Thanks a lot in advance!
As pretty much evident from the HTML the <input> field whenever recieves the focus_ the classname is-focused added.
This addition of classname is pretty much controled through the attributes, presumably the css_properties of the parent elements.
As as conclusion, it would be difficult to mask the password field characters from the clientside and have to be controled from the Application Server side.

Preventing users to enter negative sign '-' in angular input field

is there a way to stop users from entering - sign in angular inputs?
Or clear the sign as soon as they entered it?
I don't want values like -1, 9-, 124-5433.
If you only want to accept numeric vaues you can add a min attribute to the html input, like
<input type="number" min="0">
So this won't let you insert negative values.
You can try below way in your input field using oninput I hope it work for you
<input oninput="return event.target.value = event.target.value.replace(/[^0-9]/g,'')" type="text">

How to turn on/off a field from parsley.js form validation

When validating an email field [name=bar] in a form #foo, I want to switch validation of that field on and off, in relation to a checkbox.
Reading the docs, github issues and stackoverflow answers, I thought setting data-parsley-required="false" and/or data-parsley-validate="false" would be enough.
But it turns out, that all other constraints, like email, min-lenght, max-length are still validated and the input field still validates to an error condition. I would prefer it to validate to success or not at all.
<form id="foo">
<input name="bar"
maxlength="40"
value=""
class="form-control"
data-parsley-validate="false"
data-parsley-required="false"
type="email"
data-parsley-minlength="5"
data-parsley-trigger="input keyup change"
data-parsley-error-message="something is wrong">
</form>
See https://jsfiddle.net/88obg0sj/9/
So how is it possible to turn off field validation in way, it can be re-activated again?
You should tweak the excluded option, for example by adding ", [data-parsley-validate="false"]" to it.
You can follow this way:-
//destroy parsley
$('form').parsley().destroy();
//set required attribute on input to false
$('input').attr('data-parsley-required', 'false');
//reinitialize parsley
$('form').parsley();

HTML Field Type Input Number Only or Letter Only Without JavaScript

I create a form, where one field should only be filled with numbers.
I want that field can be filled only with numbers since entering input.
Like this example :
How Can I Use Javascript to Allow Only Numbers to Be Entered in a TextBox?
I've tried using Regex, but when I try to input is still able to enter letters.
<input type="number" min="2" pattern="^[0-9]" class="andi_input required-entry" name="amount" id="amount" required title='Only Number' />
I want it when input to field and not after click the Submit button and the message appear and inform that the field can only be filled with numbers.
I also try to add validate-number, but the result is the same.
How, without javascript, so that the field can only be filled with numbers or letters?
Whether for this kind of case have to use JavaScript or is there another way without JavaScript?
HTML 5 uses the type="number" so make sure that the browser that you are using is compatible. Check it out in action here.
You should check browser compatibility.
You're right with <input type="number" pattern="^[0-9]" />.
Your regex rule is :
^[0-9] :
^ assert position at start of the string
[0-9] match a single character present in the list below
(0-9 a single character in the range between 0 and 9)
You can check your regex here.
I use to use HTML5 Validation and jQuery one because IE is capricious most of the time.
UPDATE :
Without Javascript it's not possible to check pattern on real time. I suggest you to use a jQuery library like : http://www.jqueryscript.net/form/jQuery-Plugin-For-Formatting-User-Input-with-Specified-Pattern-formatter-js.html.
Here is a OneLiner:
<input type="number" onkeypress="return /[0-9]/i.test(event.key)">
or
<input type="text" onkeypress="return /[a-z]/i.test(event.key)">

jQuery unobstrusive validation returning valid when it is not

I have a form that has a required input, but jQuery is saying that the field is valid when it is not. It is strange, because the by the HTML it looks like it has value.
This is the output of three commands in the Chrome console with the textbox totally empty:
// First I ensure that the selector is correct. But I can see that it has value,
// when it is actually empty.
$('#form_0 input[name=Name]')[0].outerHTML
"<input data-val="true" data-val-length="The field Customer name must be a string with a minimum length of 3 and a maximum length of 20." data-val-length-max="20" data-val-length-min="3" data-val-required="The Customer name field is required." id="Name" name="Name" type="text" value=" Customer 0 " class="valid">"
// jQuery confirms that the field is empty
$('#form_0 input[name=Name]').val()
""
// but jQuery say that the control is valid :?
$('#form_0 input[name=Name]').valid()
1
The form and the inputs have been created dynamically with jQuery.
What could be the problem?
Thanks.
$.validator.unobtrusive.parse('#form_0');
I didn't know I have to call it again when I add inputs dynamically. I guess I have to read more documentation and less examples :P

Categories

Resources