HTML/JavaScript: Simple form validation on submit

Question

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="your@email.com" />
    <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/

You shouldn't rely on Javascript to validate a form. People with Javascript turned off will be able to enter junk. — Glitch Desire, Apr 21 '13 at 18:36
You shouldnt rely only on JavaScript validation but its good to have it as well... — Jensd, Apr 21 '13 at 18:40
Check your error console. It should say something like `Undefined variable: re` or `could not call method "test" on undefined` — Bergi, Apr 21 '13 at 18:44

score 24 · Accepted Answer · edited Jul 20 '20 at 15:30

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;
}

1: your validateForm function should not return alway false, but just on errors. 2: validating the title does have reverse logic, i.e you need !== instead of == — aton, Feb 12 '14 at 15:17

score 16 · Answer 2 · edited Jul 20 '20 at 15:33

16

The simplest validation is as follows:

<form name="ff1" method="post">
  <input type="email" name="email" id="fremail" placeholder="your@email.com" />
  <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.

edited Jul 20 '20 at 15:33

Peter Mortensen

30,738
21
105
131

answered Apr 21 '13 at 18:46

Niet the Dark Absol

320,036
81
464
592

3

@jbird Are you using an outdated browser? – Niet the Dark Absol Aug 14 '13 at 12:17

Jensd · Answer 3 · 2013-04-21T18:42:56.107

8

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.

edited Apr 21 '13 at 18:42

answered Apr 21 '13 at 18:37

Jensd

7,886
2
28
37

Nice catch :) This is definitely the issue. – Travis J Apr 21 '13 at 18:41

score 0 · Answer 4 · edited Jul 20 '20 at 15:34

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": "user@example.com",
        "title": "Your Title",
        "url": "http://www.example.com"
    })
});

score 0 · Answer 5 · edited Jul 20 '20 at 15:36

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.

score 0 · Answer 6 · edited Jul 20 '20 at 15:37

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.

HTML/JavaScript: Simple form validation on submit

6 Answers6

Linked

Related