We are using FormValidation.io for form validations, now we are trying to use the identical validator using the html attributes which is applied via the Declarative plugin.
What we want?
We want the validation to check that confirm field is same as password field if not it should fail validation
<input
class="form-control"
data-fv-not-empty="true"
data-fv-not-empty___message="The password is required"
type="password"
placeholder="Password"
name="password"
id="input-password"
autocomplete="off"
>
<input
class="form-control"
data-fv-identical="true"
data-fv-identical___compare="getPassword()"
data-fv-identical___message="The password and its confirm are not the same"
type="password"
placeholder="Confirm Password"
name="confirm"
id="input-confirm"
autocomplete="off"
>
<script>
function getPassword() {
return $('#input-password').val();
}
</script>
Now the document states we can declare the compare value as both a string or a function that returns string. Now even if we call a function there it still converts the value as string so as per our current code will show the confirm to be invalid until the value of confirm is not equal to "getPassword()" not the output of this function but this exact string.
We would like to know how can we set compare using html attributes. We can achieve the same using the programatic way but we want to make it work using Declarative mode
Documentation links
https://formvalidation.io/guide/validators/identical/
https://formvalidation.io/guide/plugins/declarative/
https://formvalidation.io/updates/
Thanks in advance.
I directly got in touch with the original developer of FormValidation and he stated that this is something we cannot achieve using html attributes.
So we wont be able to achieve this without modifying the core plugin itself.
Hope this helps anyone who was looking for the same answer.
I just run into this problem.
As a workaround I use this trick:
var fv = form.fv;
fv.updateValidatorOption(input.name, 'identical', 'compare', function(){
return inputConfirm.value;
});
Of course in a entry point where I init validation for all forms in a loop I save instance in form prop: form.fv = fv;
Related
Literally, I want to turn off password saving popup in the browser.
Many answers said that use autoComplete. But I think autoComplete doesnt' work anymore.
I want to know the recent technic for this problem.
Could you recommend some advice for this?
Thank you so much for reading it.
Here's how I do it
On submit:
Save the password from the input field
Clear the password input field
Set the input field to type="text"
handle the form submission using AJAX
This works 100% - but is a little fiddly - though, easy enough
here's how you could handle a bit easier than I described - given you aren't doing any AJAX in your login
<form action="/login" method="post" name="loginform">
<input type="text" name="username" />
<input type="password" name="input_password" />
<input type="hidden" name="password" />
<input type="submit" value="login" />
</form>
document.forms.loginform.addEventListener('submit', function() {
const {
input_password,
password
} = this.elements;
password.value = input_password.value;
input_password.value = '';
input_password.type = 'text';
});
If your login already does some AJAX, then the principal is the same, but you won't need a hidden field
it's not something you can do in your own code, it's a browser behavior, You can only achieve this by changing your browser settings. disable browser password manager
If you want to do it in your code, I think you can try something like, do not give your input element attributes name, id, type common value - do not name them as password, email, etc, to cheat the browser build-in password saving feature.
I'm using MaskedPassword.js to mask a password field in my form as demonstrated below:
<input type="password" id="pwd" name="pwd" autocomplete="off">
<script type="text/javascript">
new MaskedPassword(document.getElementById("pwd"), '\u25CF');
</script>
I'm trying to retrieve the plain text value of this password field using Javascript but unable to do so.
I've already tried the following:
document.getElementById("pwd").value
document.getElementById("pwd").text
document.getElementById("pwd").defaultValue
document.getElementById("pwd").innerHTML
Can anyone help me get the actual value?
Assuming you are using a version of the code in this post (possibly this implementation), I believe you would find it in the hidden field that is generated by the code, like so:
document.getElementById('pwd-unmasked').value
After struggling a couple of hours, I finally found out the following fix that worked for me:
document.getElementById('pwd')._realfield.value
Posting it here might help someone else.
I have 2 questions:
How to check input better? I have idea:
First, make field near input.
<input type='text' name='firstname'><label id='firstnameError'></label>
Second, call js-function on input onBlur with id of input and id of this label.
<input type='text' name='firstname' id='firstname' onBlur='checkEmpty("firstname", "firstnameError");'><label id='firstnameError'></label>
And js-script:
function checkEmpty(fieldId, errorFieldId)
{
var data = document.getElementById(fieldId).value;
if (data == "")
{
document.getElementById(errorFieldId).innerHTML="Error, input something!...";
}
}
And I will just use this function on all inputs, right?
Is it correct?
How to check all inputs in form correctly?
Sure I can set type=button and onSubmit call some function, which will check all elements in this form. ~ Same function like in first question, but with 5-7 if-blocks for each input. And yes for 10 forms, I will have to write 10 functions, etc. How better do it? Seems to me, I can only send form Id/name and get childs of element. Am I correct?
Maybe another way? I use jquery on my site anyway (some ajax). Maybe it is easier to do what I want on jquery? The problem is I am not too good in js, to use jquery easily. What do you think?
If you just want to verify if some data is provided or not, you can use required attribute.
<input type="text" name="username" required>
if you are using XHTML it should be as shown below..
<input type="text" name="username" required="required">
The required attribute is supported in Internet Explorer 10, Firefox, Opera, and Chrome and is not supported in Internet Explorer 9 and earlier versions, or in Safari.
In case if you want to use JavaScript. You can create a javascript function which will be called on submit of the form.
<form name="search" onsubmit="return validate()" >
Name: <input type="text" name="name"/>
Age: <input type="gender" name="sex"/>
<input type="submit" name="Submit" value="Submit"/>
</form>
function validate(){
// all the code for verification
return false; // if any of the step verification step fails. Otherwise return true.
}
Source: http://www.w3schools.com/tags/att_input_required.asp
To improve on your design, it's better to use non-inline JavaScript. Try using a design like this:
var fname = document.getElementById("firstname");
var other = document.getElementById("otherid");
fname.onblur = other.onblur = function() {
checkEmpty(this.id,this.id+"Error");
}
This will give all your desired elements the same onclick function and eliminate those pesky onblur attributes.
Edit: make sure your variables are declared before you chain assignments like this, or you will yield unwanted global variables.
Is there a way to validate a field in angular without using a directive?
For example: I want to make following validation on an input field.
If field is empty we should show "Field must contain a value" message.
if field contains alpha Numeric characters we should show "Field can contain only digits".
An EVEN number - message to the user "Value must be an even number".
I want to make following validation in a call to JavaScript function.
I googled around and saw that there is a way to use ng-valid and $error , however I was not managed to make it work.
Code below is according to one of the answers I got:
<div ng-app>
<form name='theForm' novalidate>
<input type='text' name='theText' ng-model='theText' ng-pattern='/^[0-9]+$/'/>
<span ng-show='theForm.theText.$error.pattern'>Field can contain only digits</span>
<span ng-show='theText.length<1'>Field must contain a value</span>
<span ng-show='theText%2!=0&&document.getElementsByName("theText").value!=""&&!theForm.theText.$error.pattern&&!theForm.theText.$pristine'>Value must be an even number</span>
<br/><input type='submit' value='Submit' />
</form>
I want to take what inside the last [span] and put inside a JavaScript function in order to make it more generic and eventually change only JS and not the HTML when conditions are changing
Can someone please advise? a working example would be great.
I'm surprised no one has mentioned ui-validate
$scope.isOdd = function($value){
return $value % 2;
}
...
<form name="myform">
<input ng-model="myVal" name="value" required
ng-pattern="/^[0-9]*$/" ui-validate=" 'isOdd($value)' "></input>
<pre>{{myform.value.$error|json}}</pre>
</form>
Doesn't get any simpler than that, and it's PROPER AngularJS validation (not silly watches)
Here's a working demo
Take a look at the angularjs form documentation - http://docs.angularjs.org/guide/forms . In general, it is based on the HTML5 attributes like required, min, max, etc.
To get, for example, your first requirement done - "an empty field should show "Field must contain a value" message, yo uwould do something like that:
<input type="text" ng-model="user.name" name="uName" required /><br />
<div ng-show="form.uName.$invalid">
<span ng-show="form.uName.$error.required">Field must contain a value.</span>
</div>
For digits only field you can use the pattern attribute with a matching regular expression (example: http://www.wufoo.com/html5/attributes/10-pattern.html).
For even number validation, I'm not sure - I think you'd have to go with custom validation for that (meaning you'd have to create a directive) or use the pattern attribute somehow.
Last but not least - remember to add novalidate to the <form> tag. Otherwise the browser will try to validate your fields as well and you don't want that:
<form ... novalidate>
...
</form>
I know the question is old and I know you didn't want a directive but you may consider using a directive if it's "Angular" way... Well here is my Angular-Validation. I made a project on Github and I think that it just rocks compare to whatever is/was available...I based myself on the excellent Laravel PHP Framework and made it available under Angular... It is so crazy simple, you need 2 lines 1 line of code, 1 line for the input, 1 line for error display, that's it... never more and never less!!! Enough said, let's give some examples:
<!-- example 1 -->
<label for="input1">Email</label>
<input type="text" validation="email|min_len:3|max_len:25|required" ng-model="form1.input1" name="input1" />
<!-- example 2 -->
<label for="input2">Alphanumeric + Exact(3) + required</label>
<input type="text" validation="alpha|exact_len:3|required" ng-model="form1.input2" name="input2" />
So I can define whatever amount of validation rules (already 25+ type of validators) which I want in a simple directive validation="min_len:2|max_len:10|required|integer" and the error message will always display in the next <span> Don't you guys like it already? 1 line of code for your input, 1 line of code for the error display, you can't be simpler than that...oh and I even support your custom Regex if you want to add. Another bonus, I also support whichever trigger event you want, most common are probably onblur and onkeyup. Oh and I also support multiple localization languages via JSON external files. I really added all the imaginable features I wanted into 1 crazy simple directive.
No more clustered Form with 10 lines of code for 1 input (sorry but always found that a little extreme) when the only thing you need is 2 lines, no more, even for an input with 5 validators on it. And no worries about the form not becoming invalid, I took care of that as well, it's all handled the good "Angular" way.
Take a look at my Github project Angular-Validation... I'm sure you'll love it =)
UPDATE
Another candy bonus! To make an even more smoother user experience, I added validation on timer. The concept is simple, don't bother the user while he's typing but do validate if he makes a pause or change input (onBlur)... Love it!!!
You can even customize the timer as per your liking, I've decided to default it to 1 second within the directive but if you want to customize you can call as for example typing-limit="5000" to make a 5 sec. timeout. Full example:
<input type="text" ng-model="form1.input1" typing-limit="5000" validation="integer|required" name="input1" />
<span class="validation text-danger"></span>
UPDATE #2
Also added input match confirmation validation (ex.: password confirmation), here is a sample code
<!-- input match confirmation, as for example: password confirmation -->
<label for="input4">Password</label>
<input type="password" name="input4" ng-model="form1.input4" validation="alpha|min_len:4|required" />
<label for="input4c">Password Confirmation</label>
<input type="password" name="input4c" ng-model="form1.input4c" validation="match:form1.input4,Password|required" />
UPDATE #3
Refactored the directive so that the requirement of having a <span> to display the error is unnecessary, the directive now handles it by itself, see the code change reflected on top.
DEMO
Added a live demo on Plunker
Well you can try to create a func
<span ng-show='isEven(theText)'>Value must be an even number</span>
$scope.isEven=function(data) {
if(data) {
return data%2===0
}
return true;
}
The method can either be defined on the current controller scope or on $rootScope.
Not a very angular way, as directives would be better but i think it would work.
I have a long long long form. It has about 200 fields. Now, about 50 fields need to be validated through JavaScript / jQuery. How can I easily validate them without a huge amount of code. I want to avoid doing this:
field1 = document.getElementById("field1").value;
if (field1 == '') {
alert ("Please enter a value for Field1");
return false
}
Is there an easier way? Thanks a lot.
Use the jquery Form validation plugin and assign the correct classes to the fields.
It's as simple as class="required" in most cases!
If you just want to check if the field is empty or not you could do something like this using jQuery:
HTML:
<form>
<input class="validate" type="text" />
<input type="text" />
<input class="validate" type="text" />
<input type="text" />
<input class="validate" type="text" />
</form>
SCRIPT:
$('.validate').each(function() { //this will get every input marked with class "validate"
if ($(this).val() == '')
return false;
});
Using JQuery validate plugin can be much help. You can control the way plugin works from your HTML code and even not write any javascript! If you need more complex validatio, you can extend it by adding specific validation functions. It allows you to localize the application as well.
This page gives a good example on how to use the plugin: http://jquery.bassistance.de/validate/demo/milk/ (click the "Show script used on this page" link).
Here is a rudimentary fiddle, that you can use to validate your form, Just add a span after each of the fields that you need to validate.
http://jsfiddle.net/refhat/h2S6G/35/
I thought about this too, but the plugin can be a bit difficult to
use. Do you know if it allows to display an alert box when an error is
found, instead of the actual displaying on the page? That's a bit too
much for this form. Thanks a lot
Here's a validator I wrote that uses a pop-up style alert box for error messages. Is that the sort of thing you are after?
http://validator.codeplex.com/
Do you want default error messages like for required validator? Regarding jquery validate plugin was it the syntax it offers to place validation information in the method call you found difficult since for a large form having validation information located separately from the text boxes makes it harder to go through and verify all fields have the right validators and messages?