Error with form validation - javascript

I'm having errors in validation of my form.
Here's the javascript:
function ValidateForm(){
email=document.getElementbyId("email").value;
confirmemail=document.getElementById("confirmemail").value;
password=document.getElementById("password").value;
confirmpassword=document.getElementById("confirmpassword").value;
errors = " ";
if (email == " ") {
erros += "Please enter your email \n";
}
emailcheck = /^.+#.+\..{2,4}$/;
if (email.match(emailcheck)) { }
else {
errors += "Please check your email \n";
}
if (email.match(confirmemail)) {}
else {
errors += "Email don't match \n";
}
if ( errors != "") {
alert(errors);
}
else { }
}
And here's the form part of HTML:
<form action="/LoginData/" method="post">
<label>Email</label>
<input id="email" type="email" autocomplete="on" placeholder="Your email id" name="email" required>
<label>Confirm Email</label>
<input id="confirmemail" type="email" autocomplete="off" placeholder="Confirm your Email id" name="confirmemail" required>
<br/>
<br/>
<label>Password</label>
<input id="password" type="password" name="password" placeholder="Password" required>
<label>Confirm Password</label>
<input id="confirmpassword" type="password" name="confirmpassword" placeholder="Confirm your Password" required>
<br/>
<br/>
<input type="submit" name="submit" value="Create Account">
</form>
It doesn't show the alert message even if i fill the fields with wrong input.
(Note: i'm using external JavaScript file)
I'm using the javascript for IE8 because i want to make the webpage run properly on it.
And it doesn't show the alert for any of the fields in IE.
A example of what i'm trying to build: 1http://aharrisbooks.net/jad/chap_07/validate.html

You need to call ValidateForm() in you code.
In this scenario calling it on submit will be the best option something like onsubmit="return validateForm()";
Also it has camel case problem. Should be getElementById instead of getElementbyId. Check your syntax Errors in browser console.

You must put
onsubmit="return validateForm()"
So
<form action="/LoginData/" method="post" onsubmit="return validateForm()">
<label>Email</label>
<input id="email" type="email" autocomplete="on" placeholder="Your email id" name="email" required>
<label>Confirm Email</label>
<input id="confirmemail" type="email" autocomplete="off" placeholder="Confirm your Email id" name="confirmemail" required>
<br/>
<br/>
<label>Password</label>
<input id="password" type="password" name="password" placeholder="Password" required>
<label>Confirm Password</label>
<input id="confirmpassword" type="password" name="confirmpassword" placeholder="Confirm your Password" required>
<br/>
<br/>
<input type="submit" name="submit" value="Create Account">
</form>
in the form tag in order to use your custom validation before submitting data.
You currently use HTML5 validation tag's so even if your cusom JS function is not called, you should see HTML5 validation with new browsers. You can see browsers that are more compliant than others with HTML5 : http://caniuse.com/#search=html5.

Related

Automatic filling of identical registration fields at the same time

I need to help. I have a next form
<form action="" method="POST">
<input type="email" name="email">
<input type="email" name="email-repeat">
<input type="password" name="password">
<input type="password" name="password-repeat">
<input type="submit" value="">
</form>
and I want when I reload to page, that browser to autocomplete all fields from saved data in the browser(email and password) twice password and twice email. I tried a few combinations with attribute of autocomplete, but nothing.
You should add autocomplete="off" to the inputs that you don't want to be filled automatically.
<input autocomplete="off" type="email" name="email">
<input autocomplete="off" type="email" name="email-repeat">
<input autocomplete="off" type="password" name="password">
<input autocomplete="off" type="password" name="password-repeat">
<input type="submit" value="">
You can find details in MDN

Parsley js: Form validation for password field(minlength) not working as expected

I have the following form in my HTML:
<form action="" method="POST" accept-charset="utf-8" data-parsley-validate >
<fieldset>
<legend>Parsely JS Testing</legend>
<input type="" name="Full Name" placeholder="Full Name" data-parsley-pattern="[a-z|A-Z]" data-parsley-trigger="focusin focusout" data-parsley-error-message="You need to enter your full name" data-parsley-errors-container="#error-container">
<input type="" name="Phone" placeholder="Phone" data-parsley-type="digits" data-parsley-min="10" data-parsley-trigger="focusin focusout" data-parsley-error-message="Enter valid phone number" data-parsley-errors-container="#error-container">
<input type="" name="Email" placeholder="Email" data-parsley-type="email" data-parsley-trigger="focusin focusout" data-parsley-error-message="Enter Valid Email" data-parsley-errors-container="#error-container">
<input type="" name="password" placeholder="Password" data-parsley-type="alphanum" data-parsley-min="7" data-parsley-trigger="focusin focusout" data-parsley-error-message="Password must be atleast 7 characters" data-parsley-errors-container="#error-container" id="password">
<input type="" name="confirmpassword" placeholder="Confirm Password" data-parsley-trigger="focusin focusout" data-parsley-error-message="Password Does not match" data-parsley-errors-container="#error-container" data-parsley-equalto="#password">
</fieldset>
<button type="submit">SUBMIT</button>
</form>
I am using parsely.js to validate this form, i am having a slight problem validating the password feild. I have the below HTML for the password feild:
<input type="" name="password" placeholder="Password" data-parsley-type="alphanum" data-parsley-min="7" data-parsley-trigger="focusin focusout" data-parsley-error-message="Password must be atleast 7 characters" data-parsley-errors-container="#error-container" id="password">
The field is validated on focusin and focusout, like so:
data-parsley-trigger="focusin focusout"
For the validation i have 2 rules , the following:
data-parsley-type="alphanum"
And
data-parsley-min="7"
These two rules don't seem to be working very well in tandem, so if i enter the following password:
gautam007
I get an error in the #error-container, the error get is the one i entered in the error message data attribute.
data-parsley-error-message="Password must be at least 7 characters"
Why am i getting this error and how do i work around this ?
Here is the demo how you implement minlength validation and the error message.
You need to use these data attributes on the form element:
data-parsley-minlength="7"
data-parsley-minlength-message="Name must be at least 7 characters"
Example:
<input type="text" id="name" name="name" data-parsley-minlength="7" data-parsley-minlength-message="Name must be at least 7 characters" data-parsley-required="true" />
Try this and see instead of data-parsley-min,
data-parsley-mincheck='7'

HTML5 custom validation not working properly

i've the following function to verify matching between 2 password input fields.
When i submit the form even if the password match i got the error and i don't understand where is the problem.
Can you guys have a look?
thanks
function checkPwdMatch() {
if (document.getElementById('password').value !=document.getElementById('confirm_password').value) {
document.getElementById('confirm_password').setCustomValidity('Two Passwords must match.');
} else {
document.getElementById('confirm_password').setCustomValidity('');
}
}
----FORM FIELDS----
<input class="form-control" type="password" placeholder="Password" id="password" name="password" value="" required>
<input class="form-control" type="password" placeholder="<?php echo $lang["joinRepeatPassword"]?>" value="" id="confirm_password" name="confirm_password" required>
Are you sure there are not other elements with the same id (password or confirm_password) in your html code?
When I have such html
<!doctype html>
<html>
<head>
<script>
function checkPwdMatch() {
if (document.getElementById('password').value !=document.getElementById('confirm_password').value) {
document.getElementById('confirm_password').setCustomValidity('Two Passwords must match.');
} else {
document.getElementById('confirm_password').setCustomValidity('');
}
}
</script>
</head>
<body>
<form method="post">
<input class="form-control" type="password" placeholder="Password" id="password" name="password" value="" required>
<input class="form-control" type="password" placeholder="password copy" value="" id="confirm_password" name="confirm_password" onblur="checkPwdMatch()" required>
<input type="submit" />
</form>
</body>
</html>
if I put aaa and bbb in two inputs, it shows they are invalid and when i put aaa and aaa everything seems to be ok. If the problem is after you send form and page refresh you need to send more details I think.

Regular expression login on jQuery form

I have a problem with a regular expression. console.log shows me the login regular expression isn't respected, but my span doesn't show, my email span works.
I think it's a basic JS/jQuery problem, but I couldn't find the solution.
HTML:
<form name="formSignup">
<fieldset>
<label for="nom">Nom :</label>
<input type="text" name="nom" id="nom" class="required" />
<label for="prenom">Prenom :</label>
<input type="text" name="prenom" id="prenom" class="required" />
<label for="email">Votre Email:</label>
<input type="email" name="email" id="email" class="required" onclick="spanHide()" />
<label for="username">Login:</label>
<input type="text" name="username" id="username" class="required" />
<label for="password">Password:</label>
<input type="password" name="password" id="password" class="required" />
<input id="Submit1" type="button" value="Login" data-role="button" data-inline="true" data-theme="b" onclick='createuser()' />
</fieldset>
</form>
JS:
var emailReg = /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/;
var loginReg= /^[a-zA-Z0-9]+$/;
if (email == '') {
$("#email").after('<span id="errormail" class="error">Please enter your email address.</span>');
}
if (!loginReg.test(myLogin)) {
console.log("error");
$("#username").after('<span id="errorlogin" class="error">only letter + digits plz</span>');
}
if (!emailReg.test(email)) {
$("#email").after('<span id="errormail" class="error">Enter a valid email address.</span>');
}

Javascript form validation and if invalid no submission

Frnds i need some help..
In this code i have validated the 2 textboxes.
The help i need is once no data has been entered in the boxes the form should not goto check.php but with an javascript alert: Invalid Data
I need this in Javascript...
function f1()
{
var v1=document.getElementById("uname").value;
var v2=document.getElementById("pass").value;
if(v1=="" || v2=="")
alert("Please Fill It..!");
}
Username:<input type="text" id="uname" placeholder="username" title="Enter your Username" name="uname"/>
Password:
<input type="password" id="pass" placeholder="password" title="Enter your password" name="pass"/>
<input type="submit" value="Login"/>
<input type="reset" value="clear"/>
</form>
Try this:
function f1()
{
var v1=document.getElementById("uname").value;
var v2=document.getElementById("pass").value;
if(v1=="" || v2=="")
{
alert("Please Fill It..!");
return false;
}
}
The problem with your function is that by default it returns true and form is submitted. You need to return false in order to prevent form submit.
you need to register your f1() as form onSubmit event handler.
<form action="formaction" method="post" onsubmit="f1()">
Username:<input type="text" id="uname" placeholder="username" title="Enter your Username" name="uname"/>
Password:
<input type="password" id="pass" placeholder="password" title="Enter your password" name="pass"/>
<input type="submit" value="Login"/>
<input type="reset" value="clear"/>
</form>
function f1()
{
var v1=document.getElementById("uname").value;
var v2=document.getElementById("pass").value;
if(v1=="" || v2=="") return false;
}
You can use the attribute onSubmit which will run the javascript in it. If it returns a falsy value, the submit won't be made, but if it returns true, the submit will be made.
<form method="POST" onSubmit="return f1()">
Username:<input type="text" id="uname" placeholder="username" title="Enter your Username" name="uname"/>
Password:
<input type="password" id="pass" placeholder="password" title="Enter your password" name="pass"/>
<input type="submit" value="Login"/>
<input type="reset" value="clear"/>
</form>
f1 has to be a function that returns true or false

Categories