Submit a form based on condition. Jquery - javascript

I have a form and a submit button. I would like to put a condition with jquery on this submit button. I wan't it to post the form only if the user enters a valid email adress.
HTML code :
<form method="post" action="{% url sportdub.views.login %}">
<input type="text" name="email" value="" class="span8"/>
<input type="submit"></button>
</form>
Javascript code :
function isValidEmailAddress(emailAddress) {
var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))#((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
return pattern.test(emailAddress);
};
What I want to do is to put a condition on my submit button:
if( !isValidEmailAddress( emailaddress ) ) {
/* don't submit the form and raise an error */
} else {
/* submit the form */
}
Any idea on how I could accomplish that?

You need to add onsubmit event handler to your form and return false if it don't pass validation.
For example according to your code:
<form method="post" action="{% url sportdub.views.login %}" onsubmit="return validateForm();">
<input type="text" id="formEmail" name="email" value="" class="span8"/>
<input type="submit"></button>
</form>
in JS:
function validateForm() {
if( !isValidEmailAddress( document.getElementById( 'formEmail' ).value ) ) {
// also before return you can add alert( 'your e-mail is invalid' );
// or display message in form, etc...
return false;
} else {
return true;
}
}
Btw, I would not recommend to use inline JS attributes, just add to all your elements and to form unique id attribute and if you use jQuery you can do all validations in .submit() method.

Inline:
<form method="post" action="{% url sportdub.views.login %}"
onsubmit="return isValidEmailAddress(this.email.value)">
<input type="text" name="email" value="" class="span8"/>
<input type="submit"></button>
</form>
Better (plain JS) - note I need an ID of the form:
window.onload=function() {
document.getElementById("form1").onsubmit=function() {
if (!isValidEmailAddress(this.email.value)) {
alert('Please enter a valid address');
return false; // cancel submit
}
return true; // allow submit
}
}
jQuery version:
$(function() {
$("#form1").on("submit",function(e) {
if (!isValidEmailAddress($("#email").val())) {
alert('Please enter a valid address');
return false; // cancel submit
}
return true; // allow submit
});
});
Last two assuming
<form id="form1" method="post" action="{% url sportdub.views.login %}">
<input type="text" name="email" id="email" value="" class="span8"/>
<input type="submit"></button>
</form>

Use one onclick call in ur submit button with return... Your code should be,
<form method="post" action="{% url sportdub.views.login %}">
<input type="text" id="email" name="email" value="" class="span8"/>
<input type="submit" onclick = "return isValidEmailAddress();"></button>
</form>
function isValidEmailAddress() {
var emailAddress = $('#email').val();
var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))#((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
return pattern.test(emailAddress);
};

Related

Form before submit when using onsubmit function

I have this form
<form id="form" method="POST" onsubmit="return validate()">
<input type="text" id="name" name="name">
<input type="submit" value="next">
</form>
and this validation
if ($("#name").val() == "") {
return false;
}
return true;
what I am trying to do, is to disable the submit button, I tried to use submit function for the form but its not triggered, the problem is I don't have access to html or js files, only one custom.js file I can add or override other functions.
anyone can help me ?
Thanks
so if you have $("#name") probably you have the jquery library.
in this case you can try remove onsubmit html property directly and use this event from jquery. $("#form").submit(...) and there you can use your validation function with return boolean value
You can override the validate function (but it is a bit dirty):
function validate() {
console.log('default validator');
return false;
}
var defaultValidator = validate;
window.validate = function () {
defaultValidator();
console.log('custom validator');
return false;
};
<form id="form" method="POST" onsubmit="return validate()">
<input type="text" id="name" name="name">
<input type="submit" value="next">
</form>
Try this in your validate function.
$('#form>submit').prop('disabled', true);

Construct GET url from java script and submit

On click of search button in my form, i want to set some param to url and submit it.
Below is my javascript
function validateSubmitSearch(form) {
if(form.elements["iAccept"].checked == true) {
form.query.value=form.search_query.value;
form.action = "vendor/search";
form.method = "GET";
form.submit();
}
}
This javascript is returning url as
http://localhost:8080/Project/vendor/search?query=xxx&search_query=xxx&search=Search
Instead i need it as
http://localhost:8080/Project/vendor/search?query=xxx
How this can be done ?
EDIT:
I cannot remove form elements search_query and search
Here is HTML code
<form class="searchform" onSubmit="validateSubmitSearch(this)">
<input name="query" type="hidden" />
<input name="search_query" class="textbox" type="text" />
<input type="checkbox" id="iAccept" name="iAccept" value="I ACCEPT">
<input name="search" class="button" value="Search" type="submit" /></td>
</form>
When you submit a form with `method="GET", all the input fields in the form will be included as URL parameters. If you want some of them to be left out, you need to remove those inputs from the form.
function validateSubmitSearch(form){
if(form.elements["iAccept"].checked == true)
{
form.query.value=form.search_query.value;
form.action = "vendor/search";
form.method = "GET";
form.seach_query.parentNode.removeChild(form.search_query);
form.search.parentNode.removeChild(form.search);
form.submit();
}
}
}
Also, you should disable the default form submission by returning false from the onsubmit code.
<form class="searchform" onsubmit="validateSubmitSearch(this); return false;">

Validate all form data before submitting

I have created a form in HTML and have use onblur event on each and every field and it is working very fine. The problem is when i click on submit button(which will send data to a servlet) the data is submitted even if it is invalid. Here is an example.
<html>
<head>
<script>
function check()
{
if(checkName()==true)
return true;
else{
alert('vhvh');
return false;
}
}
function checkName()
{
var uname=document.enq.Name.value;
var letters = /^[A-Za-z, ]+$/;
if(uname.match(letters))
{
document.getElementById('Name').style.borderColor = "black";
return true;
}
else
{
document.getElementById('Name').style.borderColor = "red";
//alert('Username must have alphabet characters only');
//uname.focus();
return false;
}
}
</script>
</head>
<body>
<form name="enq" method="post" action="Enquiry" onsubmit="check()">
<input class="textbox" id="Name"style="margin-top:10px;font-size:16px;" type="text" name="Name" placeholder="Full Name" onblur="checkName()" required /><br><br>
<input class="button" type="submit">
</form>
</body>
</html>
How can i resolve this issue?
use
<input class="button" type="button">
and put a onclick event like this:
<input class="button" type="button" onclick="this.submit()">
so you can manipulate data before you subimit it.
There is an "onsubmit" event that allows you to control form submission. Use it to call your validation functions, and only then decide if you want to allow the user to submit the form.
http://www.htmlcodetutorial.com/forms/_FORM_onSubmit.html
You have to use it in the following way if you want it to prevent the form submission:
<form onsubmit="return check()">

validate multiple URL input fields

I have following Javascript validation function that should check that the URL posted to my php are OK - if not display a message to correct the entry.
I must have done a mistake somewhere because it is not working and my console.log says: ReferenceError: Can't find variable: $
validateFormbasic.html:12
onsubmitbasic.html:24:95
Could you tell me how to fix it please? Thanks a lot!
<form method="POST" name="inputLinks" onsubmit="return validateForm();">
<input type="text" name="web1" id="url1" placeholder="domain.com">
<input type="text" name="web2" id="url2" placeholder="domain.com">
<input type="text" name="web3" id="url3" placeholder="domain.com">
<input type="submit" name="Submit" value="Done" />
</form>
<script type="text/javascript">
function validateURL(web1, web2, web3) {
var reurl = /^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/;
return reurl.test(url);
}
function validateForm()
{
// Validate URL
var url = $("#url1", "#url2", "#url3").val();
if (validateURL(url)) { } else {
alert("Please enter a valid URL, remember including http://");
}
return false;
}
</script>
As Alberto's comment mentions, it looks like jQuery isn't loaded at the point of calling the function. It also looks to me as if you're syntax for selecting the URL values isn't quite right.
I would use something along the lines of:
<form method="POST" name="inputLinks">
<input type="text" name="web1" id="url1" class="url" placeholder="domain.com" />
<input type="text" name="web2" id="url2" class="url" placeholder="domain.com" />
<input type="text" name="web3" id="url3" class="url" placeholder="domain.com" />
<input type="submit" name="Submit" value="Done" />
</form>
<script type="text/javascript">
$(function(){
function validateURL(url) {
var reurl = /^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/;
return reurl.test(url);
}
$('form').submit(function(e){
var isValid = true;
$('.url').each(function(){
isValid = validateURL($(this).val());
return isValid;
});
if (!isValid){
e.preventDefault();
alert("Please enter a valid URL, remember including http://");
}
});
});
</script>
Update
Demo JS Fiddle

Javascript form validation not working

I can't understand why my javascript isn't working... Do i need to declare a variable somewhere?
<script type="text/javascript">
function validation(form) {
      
if(form.first_name.value == '' ) {

alert('Please enter your first name');
 form.first_name.focus();
return false;
}
if(form.00N30000006S4uq.value == '') {

alert('Please enter the high end of your budget');
 form.company.focus();
return false;
}
return true;
}
</script>
<form action="https://www.salesforce.com/servlet/servlet.WebToLead" method="POST" onsubmit="return validation(this);">
As mentioned by #ReturnTrue, the NAME must begin with a letter. That is why your script is failing.
In your case since the field is auto-generated, if you know the flow of the elements in the form then you can reference the form elements array, like this...
form.elements[2].value
where form.elements[2] is form.00N30000006S4uq. That will do the job.
Example:
function validation(form) {
if(form.elements[0].value == '' ) {
alert('Please enter your first name');
form.first_name.focus();
return false;
}
if(form.elements[2].value == '') {
alert('Please enter the high end of your budget');
form.company.focus();
return false;
}
return true;
}
<form action="" method="POST" onSubmit="return validation(this);">
<input type="text" name="first_name" />
<input type="text" name="company" />
<input type="text" name="00N30000006S4uq" />
<input type="submit" name="submit" />
</form>
Form names need to begin with a letter. "00N30000006S4uq" fails because it begins with a number.
See: http://www.w3.org/TR/html401/types.html#type-cdata

Categories

Resources