I use jQuery.validate.js. I have multiple validation on one text field in a registration form. The validations are (1) cannot be blank. (2) must be an email. (3) cannot be an email already registered.
If I enter an email already registered, the error message shows up as expected. Then I start to delete text in the field. The error message for 'must be an email' pops up. When all text in the field is deleted, the error message for 'cannot be blank' pops up. This did not happen when I first edited the field before it's invalid.
I don't want the error messages show up when I'm editing the field after it is invalid. How can I do that?
Thanks!
Does this code fix your problem?
$(".selector").validate({
onkeyup: false
});
i think that's because HTML5 validation look for this Pattern:
[somthing]#[somthing]
and i think you should use novalidate attr in your form .
then try to use Email pattern like this:
pattern = " /^[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$/ "
but its better for understanding if you put your code in Question.
Related
I am doing Cypress registration test and "Create account" button is always clickable, no matter how many empty or wrongly filled fields. All that happens when wrong form is submitted is a bubble with error message like on screenshot, that isn't DOM and lasts for a few second (so I can't make assertion like expect(bubble).to.be.visible)
I would like to type wrong data and prove that application isn't accepting them. Any ideas?
You can actually validate the HTML form validation in cypress. You can look here - Can I check that a form's HTML form validation is shown when input is invalid?
cy.get('[type="email"]').then(($input) => {
expect($input[0].validationMessage).to.eq('I expect an email!')
})
I'm trying to create an autologin script for https://sso.verisk.com/login/default
I'm able to load the page and populate the Username and Password fields, but after clicking the Sign In button it will say "Please enter a username" and "Please enter a password". If I simply delete a character from the populated field, it will pass the validation.
To narrow it down, I've visited the page at https://sso.verisk.com/login/default and used the console to enter:
document.getElementById("okta-signin-username").value = "username"
document.getElementById("okta-signin-password").value = "password"
document.getElementById("okta-signin-submit").click()
As mentioned, this populates the Username and Password, but the validation doesn't detect field values until a character is either deleted or added manually. I've tested forms on other web sites with success so I'm not sure why this one is failing. Would greatly appreciate any points in the right direction!!
I believe the proper question could be "how can I submit a form programmatically"
The solution is this
Forms work like this, don't always think like a human when you deal with systems. The query selector is simply "form" because form is the only one form element in the entire document.
So I am doing a required check and a digits check on the same input field. I have the error messages appearing however I want the required message to appear to the right of a div and digits error message to appear at the bottom of the page. I thought I could achieve this by doing if (error[0].innerText == "This Field is required") then place to the right of the div and if not put else where, however it is not working. If I enter an invalid response to digits it will put the required error message at the bottom of the page from then on and vice versa for if I leave the field blank at first.
I am very confused on why this would be happening and any help would be appreciated.
You can use jQuery on error function
$('.class').error(function(){
//When .class having an error do this
$('.errorMessage).addClass('show'); /*Maybe*/
});
did you thought on use bootstrap? I used and it was the best option for a clear code
go to this link
http://getbootstrap.com/css/?#forms-control-validation
Found the answer in another stack over flow post. Apparently errorPlacement is called once per element which is why it was not updating. Here is the stack overflow post that resolved this for me: jQuery Validation Plugin: Invoke errorPlacement function when onfocusout, keyup and click
I'm making this login field that is supposed to be more automatic and not manual like normal fields. I'm trying to show errors while you type and enter your details, and not after you have pressed "submit" and checked if the details is correct.
For example if you have not typed # or .com/.no/.co.uk in an email field: make error message automaticlly appear.
Or for example if you have typed only two letters and you need minium 6 letters: show error automaticlly appear.
I hard coded for you, there must some libraries doing this automatically for you, but you can start with here.
$('#inputName').keyup(function ()
{
YOUR VALIDATION CODE
}
you only need keyup function which means on text change for input.
HERE IS THE FIDDLE
I have a form, one of the inputs of which is:
echo $this->Form->input('email', array('class'=>'formInputRegular halfTd notRequired', 'id'=>'email', 'default'=>'Email'));
The email field of this particular model isn't required. But when I try to submit the form with that input empty the automatic javascript validation appears asking me to enter something.
There is no rule in the model for this field. It's not required in the database. It may once have been (I don't think so) and I've changed it, but I've since re-baked the code for this particular model/controller so that shouldn't be a problem.
Any one any ideas on why the auto javascript validation is kicking in?
It seems to me that it is caused by HTML 5 required attribute. This is a new feature since CakePHP 2.3. Refer to http://book.cakephp.org/2.0/en/core-libraries/helpers/form.html#html5-required
You can turn this off by adding
'novalidate' => true
to the form.