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   lt form name  quot ff1 quot  method  quot post quot  onsubmit  quot validateForm    quot  gt       lt input type  quot text quot  name  quot email quot  id  quot fremail quot  placeholder  quot your email com quot    gt       lt input type  quot text quot  name  quot title quot  id  quot frtitle quot  placeholder  quot Title quot    gt       lt input type  quot text quot  name  quot url quot    id  quot frurl quot    placeholder  quot http   yourwebsite com  quot    gt        lt input type  quot submit quot  name  quot Submit quot  value  quot Continue quot    gt   lt  form gt   JavaScript   lt script type  quot text JavaScript quot  gt   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      quot  frurl quot   val        if  validateURL url       else           alert  quot Please enter a valid URL  remember including http    quot                  Validate Title     var title      quot  frtitle quot   val        if  title   quot  quot     title  null      else           alert  quot Please enter only alphanumeric values for your advertisement title quot                  Validate Email     var email      quot  fremail quot   val        if              2         2    test email      email   quot  quot     email  null      else           alert  quot Please enter a valid email quot            return false     lt  script gt   Here is also in jsfiddle http   jsfiddle net CrLsR

User · Answer

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.

User · Answer

You have several errors there  First  you have to return a value from the function in the HTML markup    lt form name  quot ff1 quot  method  quot post quot  onsubmit  quot return validateForm    quot  gt  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      quot  frurl quot   val        if  validateURL url       else           alert  quot Please enter a valid URL  remember including http    quot            return false                Validate Title     var title      quot  frtitle quot   val        if  title   quot  quot     title  null            alert  quot Please enter only alphanumeric values for your advertisement title quot            return false                Validate Email     var email      quot  fremail quot   val        if              2         2    test email      email   quot  quot     email  null      else           alert  quot Please enter a valid email quot            return false          return true

User · Answer

The simplest validation is as follows   x000D   x000D   lt form name  ff1  method  post  gt     lt input type  email  name  email  id  fremail  placeholder  your email com    gt     lt input type  text  pattern   a-z0-9  -    title  Please enter only alphanumeric characters   name  title  id  frtitle  placeholder  Title    gt     lt input type  url  name  url  id  frurl  placeholder  http   yourwebsite com     gt     lt input type  submit  name  Submit  value  Continue    gt   lt  form gt  x000D   x000D   x000D   It uses HTML5 attributes  like as pattern   JavaScript  none

User · Answer

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

User · Answer

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    lt input type text name  quot username quot  data-validate placeholder  quot Username quot  gt   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

User · Answer

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  quot email quot   BasicVal email true        validator get  quot title quot   BasicVal string true        validator get  quot url quot   BasicVal url true        return validator end          document  ready function            Create a form and add some fields     var form   new FVForm        add field  quot email quot   new FVTextField  quot Email quot         add field  quot title quot   new FVTextField  quot Title quot         add field  quot url quot   new FVTextField  quot URL quot         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             quot  lt button  gt  quot   text  quot Submit quot         appendTo  quot body quot           Pre-populate the form     form val            quot email quot    quot user example com quot            quot title quot    quot Your Title quot            quot url quot    quot http   www example com quot

[javascript] HTML/JavaScript: Simple form validation on submit

Examples related to javascript

Examples related to html

Examples related to forms

Examples related to validation