I'm trying to validate my form with the easiest way possible, but somehow it is not working and when I click submit it just takes me to the next page without giving the alert message:
HTML:
<form name="ff1" method="post" onsubmit="validateForm();">
<input type="text" name="email" id="fremail" placeholder="[email protected]" />
<input type="text" name="title" id="frtitle" placeholder="Title" />
<input type="text" name="url" id="frurl" placeholder="http://yourwebsite.com/" />
<input type="submit" name="Submit" value="Continue" />
</form>
JavaScript:
<script type="text/JavaScript">
function validateURL(url) {
var reurl = /^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/;
return re.test(url);
}
function validateForm()
{
// Validate URL
var url = $("#frurl").val();
if (validateURL(url)) { } else {
alert("Please enter a valid URL, remember including http://");
}
// Validate Title
var title = $("#frtitle").val();
if (title=="" || title==null) { } else {
alert("Please enter only alphanumeric values for your advertisement title");
}
// Validate Email
var email = $("#fremail").val();
if ((/(.+)@(.+){2,}\.(.+){2,}/.test(email)) || email=="" || email==null) { } else {
alert("Please enter a valid email");
}
return false;
}
</script>
Here is also in jsfiddle http://jsfiddle.net/CrLsR/
This question is related to
javascript
html
forms
validation
You have several errors there.
First, you have to return a value from the function in the HTML markup: <form name="ff1" method="post" onsubmit="return validateForm();">
Second, in the JSFiddle, you place the code inside onLoad which and then the form won't recognize it - and last you have to return true from the function if all validation is a success - I fixed some issues in the update:
https://jsfiddle.net/mj68cq0b/
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);
}
function validateForm()
{
// Validate URL
var url = $("#frurl").val();
if (validateURL(url)) { } else {
alert("Please enter a valid URL, remember including http://");
return false;
}
// Validate Title
var title = $("#frtitle").val();
if (title=="" || title==null) {
alert("Please enter only alphanumeric values for your advertisement title");
return false;
}
// Validate Email
var email = $("#fremail").val();
if ((/(.+)@(.+){2,}\.(.+){2,}/.test(email)) || email=="" || email==null) { } else {
alert("Please enter a valid email");
return false;
}
return true;
}
HTML Form Element Validation
Run Function
<script>
$("#validationForm").validation({
button: "#btnGonder",
onSubmit: function () {
alert("Submit Process");
},
onCompleted: function () {
alert("onCompleted");
},
onError: function () {
alert("Error Process");
}
});
</script>
Go to example and download https://github.com/naimserin/Validation.
Disclosure: I wrote FieldVal.
Here is a solution using FieldVal. By using FieldVal UI to build a form and then FieldVal to validate the input, you can pass the error straight back into the form.
You can even run the validation code on the backend (if you're using Node.js) and show the error in the form without wiring all of the fields up manually.
Live demo: http://codepen.io/MarcusLongmuir/pen/WbOydx
function validate_form(data) {
// This would work on the back end too (if you're using Node)
// Validate the provided data
var validator = new FieldVal(data);
validator.get("email", BasicVal.email(true));
validator.get("title", BasicVal.string(true));
validator.get("url", BasicVal.url(true));
return validator.end();
}
$(document).ready(function(){
// Create a form and add some fields
var form = new FVForm()
.add_field("email", new FVTextField("Email"))
.add_field("title", new FVTextField("Title"))
.add_field("url", new FVTextField("URL"))
.on_submit(function(value){
// Clear the existing errors
form.clear_errors();
// Use the function above to validate the input
var error = validate_form(value);
if (error) {
// Pass the error into the form
form.error(error);
} else {
// Use the data here
alert(JSON.stringify(value));
}
})
form.element.append(
$("<button/>").text("Submit")
).appendTo("body");
//Pre-populate the form
form.val({
"email": "[email protected]",
"title": "Your Title",
"url": "http://www.example.com"
})
});
The simplest validation is as follows:
<form name="ff1" method="post">
<input type="email" name="email" id="fremail" placeholder="[email protected]" />
<input type="text" pattern="[a-z0-9. -]+" title="Please enter only alphanumeric characters." name="title" id="frtitle" placeholder="Title" />
<input type="url" name="url" id="frurl" placeholder="http://yourwebsite.com/" />
<input type="submit" name="Submit" value="Continue" />
</form>It uses HTML5 attributes (like as pattern).
JavaScript: none.
You need to return the validating function. Something like:
onsubmit="return validateForm();"
Then the validating function should return false on errors. If everything is OK return true. Remember that the server has to validate as well.
I use this really simple small JavaScript library to validate a complete form in one single line of code:
jsFormValidator.App.create().Validator.applyRules('Login');
Check here: jsFormValidator
The benefit of this tool is that you just write a JSON object which describe your validation rules. There isn't any need to put in a line like:
<input type=text name="username" data-validate placeholder="Username">
data-validate is injected in all the input fields of your form, but when using jsFormValidator, you don't require this heavy syntax and the validation will be applied to your form in one shot, without the need to touch your HTML code.
Source: Stackoverflow.com