I have a contact form in which missing fields and invalid fields are highlighted in red. All is working well apart from the email validation field. The issue I face is that when the user inputs an invalid email address into the email input field and submits the input field is highlighted red (perfect!), however when the user re-enters with a valid email address and submits the highlighted border remains.
function validateEmail(email) {
var emailReg = /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/;
return emailReg.test(email);
}
$("#contactForm").submit(function(event) {
$("#email").removeClass("border-red");
if (!validateEmail("#email")) {
$("#email").addClass("border-red");
}
});
You need to pass the value of #email input to validateEmail function
if (!validateEmail($("#email").val()){
}
$("#contactForm").submit(function(event)
{
$("#email").removeClass("border-red");
if (!validateEmail($("#email").val())
{
$("#email").addClass("border-red");
}
});
Related
I have multiple input type text on jsp form for each the range is defined to the next input type textbox i want to validate with the defined range and if the value beyond the range validation function ask for pop confirmation if user enter userid in text that compare with session value ie 'user' then the validation function allow user to submit form with return true and not ask again for that filed validate .how can i achieve this using javascript function.any other way that can i achieve same using javascript .Request you to Suggest Option with example code.
JavaScript code:-
if(document.getElementById('pH'+formid).value !=0)
{
var user;
var value=document.getElementById('pH'+formid).value;
var maxmin=document.getElementById('pHspecf'+formid).value.split('-');
var max=maxmin[0];
var min=maxmin[1];
if(value<min||value>mix)
{
alert("max-"+max+" min-"+min+" value of parameter-"+value);
var c=confirm("Entered Value Beyond the Specification Range.\n DO you Still Want To continue Press Yes..!");
if (c==true)
{
var person=prompt("Please enter your Username","Your User name");
if (person!=null)
{user=person;
alert("Hello "+person+" Your Request Is Accepted..!");
}else{
document.getElementById('pH'+formid).style.backgroundColor = "lightblue";
document.getElementById('pH'+formid).focus();
return false;
}
}
else
{
document.getElementById('pH'+formid).focus();
return false;
}
}
}
As am not good with JS and Jquery, am struggling to add new validation rule to the Marketo form, which shows error message when tried to submit the form leaving any field empty along with I need to validate the FirstName and LastName fields to allow only the alphabetic characters and should through a error message when numeric characters are entered.
Below is my Marketo LP: http://qliktest.qlik.com/Vinu-Test1_Reg_Form.html
Here is an example of custom email validation. You can put the custom code in whenReady function.
MktoForms2.whenReady(function(form) {
function isEmailValid(email) {
RE_EMAIL_ASCII_PUBLIC = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+#[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+$/;
return RE_EMAIL_ASCII_PUBLIC.test(email);
}
form.onValidate(function() {
var values = form.vals();
if (values.Email) {
if (!isEmailValid(values.Email)) {
form.submitable(false);
var emailElem = form.getFormElem().find("#Email");
form.showErrorMessage(
// write your message here
"Must be valid email.",
emailElem
);
} else {
form.submitable(true);
}
}
});
If you mark the fields as "required" in Marketo there is already logic built in that will take care of the validation for you. If you want to create some custom validation logic, I.E. only allowing alphabetic characters in the fields, you need to use the Marketo Forms 2.0 Javascript API (http://developers.marketo.com/documentation/websites/forms-2-0/)
Here's an example of validating a Marketo form field using the API:
MktoForms2.whenReady(function (form) {
//listen for the validate event
form.onValidate(function() {
// Get the values
var vals = form.vals();
//Check your condition
if (vals.Country == "USA" && vals.vehicleSize != "Massive") {
// Prevent form submission
form.submittable(false);
// Show error message, pointed at VehicleSize element
var vehicleSizeElem = form.getFormElem().find("#vehicleSize");
form.showErrorMessage("All Americans must have a massive vehicle", vehicleSizeElem);
}
else {
// Enable submission for those who met the criteria
form.submittable(true);
} }); });
I have a forgot password form. It has two fields 1) email and 2) mobile. So what I need is a validation for it. like both field should not be empty, both field should not be filled, any one only should be filled. email should be in email format and mobile should only contain numbers.
javascript Code:
function validate_fgtmgrpwd(){
var adminid=document.f_mgr_password.mgrid;
var adminmobile=document.f_mgr_password.mgrmobile;
var mgr_length=document.f_mgr_password.mgrmobile.value;
if ((document.f_mgr_password.mgrid=="Ex: ManagerID#Email.com")||
(document.f_mgr_password.mgrid==""))
{}
{document.getElementById("validationMessage").innerHTML=" <font color='#FF0000'>Error: </font> Please Enter Either Email Id Or Mobile No:!";
popup('validationPopup');
mgrid.focus();
return false;
}
}
You should do the validation server side, not client side. There are always ways to get around your javascript form validation.
So you should check/validate the POST values in your php script, and act accordingly.
With html5 you can define an input type="email" for your email field ( so it parse properly inserted email ) and an input type="tel" for your mobile phone field. So, set the clear field at onfocus event for the other field. this should works fine.
Try this:
function validate_fgtmgrpwd() {
var adminid = document.f_mgr_password.mgrid,
adminmobile = document.f_mgr_password.mgrmobile,
emailExp = /^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/gi,
phoneExp = /^[0-9\-\+]{9,15}$/gi;
if(!adminid.value.length && !adminmobile.value.length){
alert("At Least one field is mandatory!");
adminid.focus();
return false;
} else {
if(adminid.value.length && !emailExp.test(adminid.value)){
alert("Enter a valid email");
adminid.focus();
return false;
} else if(adminmobile.value.length && !phoneExp.test(adminmobile.value)) {
alert("Enter a valid phone number");
adminmobile.focus();
return false;
} else {
return true;
}
}
}
For HTML5 supporting browsers, native validation will work and for other browsers, custom validation will work.
jsfiddle: http://jsfiddle.net/MR6bD/2/
I have been writing a code for validating forms using javascript/jquery. Following is a code snippet for checking email format. The problem is when I enter invalid email, it recognizes it, but when I go back to this field and enter correct email, the error text still stays even though I have used the 'else' part. How do I remove the error text in this case?
if(e1.value!=''){
var emailRegEx = /^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
if (document.signupForm.email1.value.search(emailRegEx) == -1) {
$("#err_email1").html("Please enter valid email address.");
}
status=0;
}
else{
$("#err_email1").html("");
status=1;
}
Your else block to run the code which removes the error message is only running when the email field is blank, which is presumably not what you want, try the edit below.
if(e1.value!='')
{
var emailRegEx = /^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
if (document.signupForm.email1.value.search(emailRegEx) == -1) {
$("#err_email1").html("Please enter valid email address.");
status=0;
}
else
{
$("#err_email1").html("");
status=1;
}
}
I have a problem where I have 3 input fields. The first field is for the username and the other two fields are for password validation. Now the password fields cannot contain the user name field so I have written the logic to display a message if the password fields contains any part of the user name. However if the user name field has nothing in it, that same validation message is still firing if something is typed in the password field.
Here is the code
Code getting the user name field:
if (document.getElementById("tUserName")) {
uN = document.getElementById("tUserName").value;
}
else {
uN = "";
}
The user name field regEx:
containsUsername = new RegExp(uN);
this is the code that is responsible for the validation error message:
if (document.getElementByIdd("tUserName")) {
if (containsUsername.test(value)) {
dojo.addClass(dojo.byId('result-userName'), 'hide');
}
else {
dojo.removeClass(dojo.byId('result-userName'), 'hide');
}
}
I'm worried that I must be missing the point here so bear with me if I am....
So you want the validation error not to show when they type in passwords without anything in the username field?
Can you not just check that the username has a value of something other than an empty string before you try running it through the regex?
if (document.getElementById("tUserName")) {
if (document.getElementById("tUserName").value != '' && containsUsername.test(value)) {
dojo.addClass(dojo.byId('result-userName'), 'hide');
}
else {
dojo.removeClass(dojo.byId('result-userName'), 'hide');
}
}