Stop form from submitting when it doesn't validate - javascript

The validation works, and the alert pops up when the email address is not valid, but then it goes and submits it after you click 'Ok' anyway. How do I stop it from processing the action?
Code sample:
<input type="submit" onclick="validate()" />
function validate() {
var email = $('input[name=email]').val();
if (!/(.+)#(.+){2,}\.(.+){2,}/.test(email)) {
alert('Please enter a valid email address');
return false;
}
}
Thanks!

onclick="return validate();"
then return true if validation is successful and false if not...
you can also attach the validation to the form itself:
<form onsubmit="return validate();">
or with jquery:
$('form').submit(function() {
// validate
});

You need to bind onsubmit event of the form tag i.e.
<form onsubmit="return validate();" >...</form>

Related

calling a method if the validation function is true

When the submit button is pressed, my validation function should check if the fields are validated then call the setProfile method. currently when i click the submit button it will not validate my fields so something must be wrong
<form name="Login" method="post" action="#" onsubmit="return validateForm()">
<input type="text" name="fName" id="name"> <br>
</form>
<input type="submit" name="Update" value="Update">
function validateForm() {
var n = document.forms['Login']['fName'].value;
if(n==null || n=="")
{
alert("Please enter your name");
return false;
}
return true
}
function UpdateProfile() {
document.querySelector('submit').addEventListener('click', e=>{
const myProfile = new Profile
if (e.validateForm === true){
myProfile.setProfile();}
})
}
The most likely reason for your code not working is that your validateForm() function is not getting called at all on submit button press. To find out if that's the case, the simplest thing to do is to add an alert() at the top of the validateForm() function.
If it's indeed not called, google "call javascript function on button click" for a code sample. Here's one: Using an HTML button to call a JavaScript function

Checking For Matching Email's In HTML Form

I have a webpage where a user submits a form containing an email field and a confirm email field.
How do I check to make sure both of these fields equal the same thing?
<form>
Email: <input type="text" name="email"><br /><br />
Confirm Email: <input type="text" name="confirmemail"><br /><br /><br /><br />
<input type="submit" value="Submit">
</form>
With jQuery, but no error handling, I'd suggest:
$('form').on('submit', function() {
return $('input[name=email]').val() == $('input[name=confirmemail]').val();
});
Ridiculously simple JS Fiddle demo.
Easiest way would be to use Javascript as you can stop form submission before it goes to your php file. However it is still good practice to verify the data entered with the php file as well as there are some programs that will allow you to change data being submitted in a form after javascript checks are made.
<script>
function checkMatch() {
var email = document.getElementById('email').value;
var emailConfirm = document.getElementById('emailConfirm').value;
if (email != emailConfirm) {
alert("Email addresses are not the same.");
return false; //Returning 'false' will cancel form submission
} else {
/*
place the return true; at the end of the function if you do other
checking and just have if conditions and return them as false. If
one thing returns false the form submission is cancelled.
*/
return true;
}
}
</script>
And change your form to have onSubmit
<form method="post" action="submit_query.php" onSubmit="checkMatch()">
Add id's to your email inputs such as: email and emailConfirm. You can change them if you wish but just for an example I used those.

Do some client side validation before posting to server - browser issue

I have a form where I'm posting to PHP server page. Before I POST I do some validation test on the client side, if all good I return true and then submit starts, if there's problems I return false and the submit cancel.
<form onsubmit="return validateForm()" method="post" action="t5.php">
and the validation function :
function validateForm() {
email = document.getElementById('email').value;
name = document.getElementById('name').value;
if ((name==="")|| (email=="") ) {
document.getElementById('validateError').innerHTML="error text";
return false;
}
else
return true;
};
This logic works on last Chrome version, but tried this on Chrome 19 and Firefox and its returns false but still doing immediately a submit.
any ideas?
Instead on calling your validate function on "onsubmit", you can call a similar function on a button click and then if no errors, submit the form via code
Try something like
<form name="testform" id="testform" method="post" action="t5.php">
<input type="text" name="name" id="name"/>
<input type="text" name="email" id="email"/>
<input type="button" name="Submit" value="Submit" onclick="validateSubmitForm();"/>
</form>
validateSubmitForm function might have something like this
function validateSubmitForm() {
var email = document.getElementById('email').value;
var name = document.getElementById('name').value;
if ((name=="")|| (email=="") ) {
document.getElementById('validateError').innerHTML="error text";
}
else {
document.testform.submit();
}
}
Try using preventDefault() to stop the form from submtting.
and HTMLFormElement.submit() to submit if everything is Ok.
Try this one :
Java script
function validateForm(e) {
email = document.getElementById('email').value;
name = document.getElementById('name').value;
if ((name=="")|| (email=="") ) {
document.getElementById('validateError').innerHTML="error text";
e.preventDefault();
}
};
HTML
<form onsubmit="validateForm(event)" method="post" action="t5.php">

Validating a field before submitting

I have a text field and a button.
I want to validate the field, and if the validation fails, the button should not "submit".
This is my button:
<input type="submit" onsubmit="return validate()"
And this is my validation function:
function validate()
{
var number = document.getElementById("temp");
alert (number.value);
if ( /^[0-9]{12}$/.test(number.value) )
{
alert(number);
return true;
}
alert ("מספר הפנייה חייב להיות בן 12 ספרות");
return false;
}
But it wont work, the submit occures any way.
Any ideas?
The onsubmit event should be attached to the form object, not the submit button.
It should be like this:
<form id = "myform" onsubmit="return validate()" action = "mypage.php">
<input type="submit">
</form>
This should work...

onsubmit not calling js function in chrome but submitting form directly

My form is working fine in Firefox and IE. On calling onsubmit it calls js function and validates the code, and if validation is good, then it submits the form.
However, in chrome it is not doing validation, but simply submitting the form directly.
I am not sure why it is so, Did lot of search but in vain.
Any help will be great towards solving this issue.
Form Code:
<form name="myform" action="queryfeedback.php" method="post" onSubmit="return validateForm(myform);">
<label for="labelField_Name" id="idLabel_Name"></label>
<input type="text" name="nameField_Name" id="idField_Name" placeholder="Enter your name here"/>
<br />
<label for="labelField_EMail" id="idLabel_EMail"></label>
<input name="nameField_EMail" type="text" id="idField_EMail" placeholder="Enter your E-Mail address here" />
<br />
<label for="labelField_Message" id="idLabel_Message"></label>
<textarea name="nameField_Message" id="idField_Message" placeholder="Enter your message for us here"></textarea>
<br />
<input type="Submit" name="nameSubmit" id="idButton_Submit" value="Submit" alt="Submit Button"/>
</form>
Validation Code:
function validateForm(form)
{
alert(form.nameField_Name.value);
//alert(formValueEMail.value);
//alert(formValueMessage.value);
if(form.nameField_Name.value=='')
{
alert("Name field is required. Please fill it in.");
form.nameField_Name.focus();
form.nameField_Name.select();
return false;
}
if(form.nameField_Name.value=='Enter your name here')
{
alert("Name field is required. Please fill it in.");
form.nameField_Name.focus();
form.nameField_Name.select();
return false;
}
if(form.nameField_EMail.value=='')
{
alert("E-Mail Address field is required. Please fill it in.");
form.nameField_EMail.focus();
form.nameField_EMail.select();
return false;
}
if(form.nameField_EMail.value=='Enter your E-Mail address here')
{
alert("E-Mail Address field is required. Please fill it in.");
form.nameField_EMail.focus();
form.nameField_EMail.select();
return false;
}
//Checking for correct format of EMail address.
var x=document.forms["myform"]["nameField_EMail"].value;
var atpos=x.indexOf("#");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Not a valid e-mail address");
return false;
}
if(form.nameField_Message.value=='')
{
alert("Message field is required. Please fill it in.");
form.nameField_Message.focus();
form.nameField_Message.select();
return false;
}
if(form.nameField_Message.value=='Enter your message for us here')
{
alert("Message field is required. Please fill it in.");
form.nameField_Message.focus();
form.nameField_Message.select();
return false;
}
return true;
Try passing in the event parameter and running event.preventDefault() so it stops submitting the form until it is validated.
You aren't closing your function 'validateForm' with }. Therefore it could be throwing an error.
Use onsubmit="return validateForm(this);" Note that attribute name is onsubmit with no camel case and argument is this
validateForm should be a global function.
working example: http://jsfiddle.net/qrZ8a/3/

Categories