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">
Related
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
I am working on jquery validation with form action php submit. I created jquery validation using click function first time it's validate the input field on second click it's redirecting to form action url. How to prevent this using client side validation. How can i solve this.
<form action="test.php" method="post">
<input class="qemail" name="your-email-address" placeholder="Your email address" value="" type="text">
<textarea class="qmessage" name="your-enquiry" rows="8" placeholder="Your message"></textarea>
<input id="submit_sf" name="enquiry-submit" value="SUBMIT" type="submit">
</form>
$(document).ready(function(){
$('input[name="enquiry-submit"]').click(function(){
var email = $('.qemail').val();
var msg = $('.qmessage').val();
var email_regex = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if(!email.match(email_regex) || email.length == 0 ){
if ($('.qemail').prev(".rvalidation").length == 0){
$('.qemail').before('<p class="rvalidation" style="position:relative; color: #000; font-size:12px;">Please enter a valid Details *</p>');
$(".qemail").focus();
console.log("email field is empty");
$(".qemail").focus();
//console.log("validate1"); \
return false;
}
//return false;
}
if(msg.length == 0){
console.log("message field is empty");
return false;
}
});
});
change type = "button"
<button id="submit_sf" name="enquiry-submit" value="SUBMIT" type="button">Submit</button>
The function() within the .click event can accept an argument for the event handler.
$('input[name="enquiry-submit"]').click(function(ev) { ...
You can use ev.preventDefault(); to keep the post from actually occurring until validation has passed. You'll need to manually trigger the form post though.
$('input[name="enquiry-submit"]').click(function(ev) {
ev.preventDefault();
...
}
I'm trying to make this registration form work even if javascript is disabled, I don't know where to begin. Would really appreciate some help!
HTML:
<form name="news" onsubmit="validateForm()" action="thanks.html">
<input type="text" placeholder="Namn" name="name" id="name"><br>
<input type="text" placeholder="E-postadress" name="email" id="email"><br>
<input type="submit" value="Send" name="send" id="send">
</form>
Js file:
function validateForm()
{
if( document.getElementById('name').value === '' ){
alert("Please enter your name!");
return false;
}
var emailExp = /^[\w\-\.\+]+\#[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(document.news.email.value.match(emailExp))
{
return true;
}
else
{
alert("Please enter your e-mail!");
document.news.email.focus();
return false;
}
}
function init()
{
var validate = document.getElementById("send");
validate.onclick = validateForm;
}
window.onload = init;
What server-side technology are you using?
There really aren't ways to validate on client side without JavaScript.
Use the built-in server-side validation controls in ASP.NET or MVC.
Put your form validation on the server, but it appears your action is thanks.html which in most cases doesn't have any server side logic. Actually, I'm not sure how the form works with javascript other than to give the impression you took down their information.
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.
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>