Angular 4 template driven validation fails. Is this a known issue, or my bug?
Html:
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" required
[(ngModel)]="model.email" name="email" #email="ngModel" #spy>
<div>TODO remove: {{spy.className}}</div>
<div [hidden]="email.valid || email.pristine" class="alert alert-danger">
Valid email is required
</div>
</div>
Component class has property:
model = new SignupModel('','','','');
CSS:
input:invalid:not(.ng-pristine) {
border-left: 5px solid #a94442; /* red */
}
input:valid:not(.ng-pristine) {
border-left: 5px solid #42A948; /* green */
}
When page first loads, you can see email class names: form-control ng-untouched ng-pristine ng-invalid
The alert message is hidden due to email.pristine === true
When user starts typing "aa" the class names change: form-control ng-dirty ng-valid ng-touched
Now the message is hidden due to email.valid === true
However, since "aa" is not a valid email, the left border shows as red via css.
Why does Angular consider email.valid to be true and sets ng-valid class, when the css correctly interprets the input as invalid?
The style class does change to ng-invalid when you remove "aa", correctly interpreting "required" property.
Solution is to add additional "email" attribute to input tag:
<input type="email" class="form-control" id="email" required email
[(ngModel)]="model.email" name="email" #email="ngModel">
Related
I have the following html code from some CMS:
<esw-input _ngcontent-ysg-c21="" class="address-form__middleName ng-touched ng-pristine" type="text" _nghost-ysg-c16="" maxlength="60"><input _ngcontent-ysg-c16="" class="textInput ng-pristine ng-touched" triggers="manual" id="middleName" type="text" placeholder="Отчество" required="" maxlength="60"><!----><div _ngcontent-ysg-c16="" class="error"><esw-field-validation _ngcontent-ysg-c16="">Пожалуйста, введите ваш отчество
</esw-field-validation></div></esw-input>
How to set value of this field with javascript or jquery? I try following
var element = $("#middleName");
element.val(MiddleName).trigger('blur');
With this code I see new value, but field reported as invalid(empty) and not possible to submit form. Some CMS used, and blocks me to do what I want.
You can do it like this with pure JS.
UPD with focus and blur methods
// Shortcut
const s = document.getElementById("middleName");
// Focus field
s.focus();
// Add value
s.value = "Джонович";
// Set value attribute to input tag
s.setAttribute("value", "Джонович");
// blur field
s.blur();
<esw-input _ngcontent-ysg-c21="" class="address-form__middleName ng-touched ng-pristine" type="text" _nghost-ysg-c16="" maxlength="60">
<input _ngcontent-ysg-c16="" class="textInput ng-pristine ng-touched" triggers="manual" id="middleName" type="text" placeholder="Отчество" required="" maxlength="60">
<!---->
<div _ngcontent-ysg-c16="" class="error">
<esw-field-validation _ngcontent-ysg-c16="">Пожалуйста, введите ваш<b style="color:red">e</b> отчество</esw-field-validation></div></esw-input>
I have an HTML code, with 3 input fields :
<div class="field" >
<input placeholder="Firstname" class="firstname" id="firstname_field" name="firstname" size="30" value="" type="text" >
</div>
<div class="field" >
<input placeholder="Lastname" class="lastname" id="lastname_field" name="lastname" size="30" value="" type="text" >
</div>
<div class="field" >
<input placeholder="Email" class="email" id="email_field" name="email" size="30" value="" type="text" >
</div>
Currently, because they are surrounded by div's, they display in block : http://jsfiddle.net/k2Nqp/159/
I need the 2 first fields to display "inline" and not as block, and the 3rd one to stay as a block.
Easy if you put "display:inline-block" inside the div's. But the tricky part here, is that I don't have any control on this HTML code, as it's auto-generated by a shortcode. I can add CSS, using the already existing classes, or even javascript (I used javascript to insert the placeholder)
And since the 3 divs have the same class, they would display all block or all inline, so I can only work on the input fields. Unfortunately I tried specified "inline-block" to the input fields, and it's not working.
Any idea on how to make this work ?
Thank you !
Use below CSS, to achieve your expected result
.field{
display:inline;
}
#email_field{
display:block;
}
http://jsfiddle.net/Nagasai_Aytha/k2Nqp/164/
display:inline will allow all fields to be displayed in inline and display:block on third field , will make it block element and gets displayed in separate line
If you need to do this with a more complex set of fields i would suggest checking out the :nth-of-type() and :nth-child() css selectors.
.field {
display: inline-block;
}
.field:last-child {
display: block;
}
<div class="field" >
<input placeholder="Firstname" class="firstname" id="firstname_field" name="firstname" size="30" value="" type="text">
</div>
<div class="field" >
<input placeholder="Lastname" class="lastname" id="lastname_field" name="lastname" size="30" value="" type="text">
</div>
<div class="field" >
<input placeholder="Email" class="email" id="email_field" name="email" size="30" value="" type="text">
</div>
May be you can use nth-child() selector to align your div's
div:nth-child(1),div:nth-child(2) {
display:inline;
}
Fiddle link
Read about nth-child
The below CSS rule will select all of the elements with the field class except for the last one and apply the display style with value inline-block.
.field:not(:last-child) {
display:inline-block;
}
I have a text input field:
<input type="text" name="email" size="25" placeholder="Email Address" required/>
Is there a way to format the input field to only allow certain text to be valid?
For example: In that particular text field, the user must input an email address which ends in #hotmail.co.uk. Any other email domains such as #yahoo.com will not be valid and therefore will show an error when clicking submit (Will not register the user).
You can use the HTML5 pattern attribute to validate whether the string ends with #hotmail.co.uk.
In this case you can use the following regular expression:
^.*#hotmail\.co\.uk$
<form>
<input type="text" name="email" pattern="^.*#hotmail\.co\.uk$" size="25" placeholder="Email Address" required/>
<input type="submit" />
</form>
Alternatively, you could also just attach an input event listener to the element and check manually. This is just a basic example, feel free to customize to your needs. I would still suggest validating that the value is a valid email address by using the regex from this question.
$('input[name="email"]').on('input', function(e) {
var isValid = this.value.match(/^.*#hotmail\.co\.uk$/) !== null;
$(this).toggleClass('isValid', isValid);
});
.isValid {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" name="email" size="25" placeholder="Email Address" required/>
<input type="submit" />
</form>
many solutions are available:
validate form with javascript.
use 2 inputs: a text input for the username and a select options or radio buttons for "#site.com"
pattern attribute on input
Extended answer using the "pattern" attribute (from Josh Crozier):
After the user changed the value of the input you can check it for a valid input:
In addition you could test the input while the user is typing the value and highlight the border:
function check(el) {
if (new RegExp(el.pattern).test(el.value) == false) {
alert("Bad Input")
}
}
function test(el) {
if (new RegExp(el.pattern).test(el.value) == false) {
el.classList.add("bad")
} else {
el.classList.remove("bad")
}
}
.bad {
border-color: red;
}
<input pattern="^.*#hotmail\.co\.uk$" onchange="check(this)" oninput="test(this)" type="text" name="email" size="25" placeholder="Email Address" required/>
I am pretty new in HTML 5 and I have the following doubt.
I have a form like this:
<form class="form-horizontal" action="/IDES/salvaRegistrazione" method="POST" name="formRegistrazione">
<div class="form-group">
<label class="control-label col-sm-2" for="inputNome">Nome</label>
<div class="col-sm-10">
<input id="inputNome" class="form-control" type="text" value="" required="required" placeholder="Nome" name="nome">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="inputEmail">E-mail</label>
<div class="col-sm-10">
<input id="inputEmail" class="form-control" type="email" value="" required="required" placeholder="E-mail" name="email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="inputEmail2">E-mail</label>
<div class="col-sm-10">
<input id="inputEmail2" class="form-control" type="email" placeholder="Inserisci nuovamente E-mail" name="inputEmail2">
</div>
</div>
<input id="submitRegistrazione" class="btn btn-default pull-right" type="submit" value="Registrati" name="submitRegistrazione">
</form>
As you can see the input tag have setted the required="required" attribute and as you can see in this JSFiddle if you don't insert the value into the input tag it is automatically shown an HTML error message popup:
https://jsfiddle.net/fntwyn9j/
Now my problem is that into my form I have also 2 field having type="email".
My problem is that I want that if the second email value (the one inserted in the field having id="inputEmail2") is not equal to the first email value (the one inserted into the field having id="inputEmail") appear a custom message (in the same HTML5 style) that say to me that the 2 fields have not the same value and the form is not submitted.
Searching on the web I found this example that use event listener to add custom message: http://jsfiddle.net/B4hYG/9/
But is seems to me that don't work and I have no idea about how to implement the previous requirement.
How can I solve this issue and implement this kind of HTML5 custom validation?
Solved by myself:
$(document).ready(function() {
document.getElementById("inputEmail2").addEventListener("input", function (e) {
valoreInpitEmail = $('#inputEmail').val();
valoreInpitEmail2 = $('#inputEmail2').val();
//alert("value inputEmail: " + valoreInpitEmail + " value inputEmail2: " + valoreInpitEmail2);
//if (e.target.value != "") {
if(valoreInpitEmail != valoreInpitEmail2) {
alert("EMAIL DIVERSE");
//alert("BLABLABLA");
e.target.setCustomValidity("Le E-mail inserite non corrispondono, per favore inserirle nuovamente");
}
else {
// Let the browser decide whether this is a valid email address
// This actually prevents that the call of setCustomValidity()
// in the IF doesn't get removed thus the user cannot submit the form
//alert("ELSE");
e.target.setCustomValidity("");
}
});
});
Below is my form which has password and confirm password field
<div class="form-group">
<label class="control-label">password</label>
<input type="text" class="form-control" name="password"
data-validate="minlength[8]"
data-message-required="email is required" placeholder="password">
</div>
<div class="form-group">
<label class="control-label">confirm password</label>
<input type="text" class="form-control" name="password_confirm"
data-validate="minlength[8],equalTo[password]"
data-message-required="email is required" placeholder="confirm password">
</div>
Below is my part of validation field.
if (params = rule.match(/(\w+)\[(.*?)\]/i)) {
if ($.inArray(params[1], ['minlength', 'equalTo']) != -1) {
opts['rules'][name][params[1]] = params[2];
message = $field.data('message-' + params[1]);
if (message) {
opts['messages'][name][params[1]] = message;
}
}
}
The minlength[8] seems to work perfectly, but when i try to match my password with confirm password its not working. I tried passing the name attribute in three ways, but none of them work.
equalTo[password]
equalTo["password"]
equalTo["#password"]
Also can anyone tell me what does this regular expression do /(\w+)\[(.*?)\]/i)
The parameter inside equalTo["#password"] is #password.
#password is a jQuery selector that matches an element with id="password". However, I don't see a id attribute on your password field. Try adding one...
<input type="text" class="form-control" id="password" name="password" ....
Quote OP:
"Also can anyone tell me what does this regular expression do /(\w+)\[(.*?)\]/i"
See: http://regexr.com/39d43