Simple validators not working, new to custom validators

Question

Hey guys really basic issue here I'm having trouble with. This is the first time I have coded validations from scratch and can't figure out why they are not working. When I click my submit button it just forward to "your file was not found" page. It is not acknowledging my validators at all. Input on validators in general, and how to improve or fix this would be much appreciated.

<DOCTYPE!>
<html>
  <head>
      <script src="gen_validatorv4.js" type="text/javascript"></script>

      <link rel="stylesheet" type="text/css" href="style.css">

      <body>
        <div id= "videoGameCircuit">
          <img src="Images/vg.jpg" width="900" height="400" alt="video game circuit" />
        </div>
        <div>
            <form action="myForm" onsubmit="return validateForm()" method="post">
            Name: <input type="text" name="name" value="" size="25" maxlength="50" /><br>
            Email: <input type="text" name="email" value="" size="25" maxlength="50" /><br>
            <input type="submit" name="submit" value="sign me up!" />
          </form>
          <script type="text/javascript">
          var frmvalidator  = new Validator("myForm");
          //where myform is the name/id of your form

          var ele = myForm; ele.addEventListener("submit", function(e){e.preventDefault();
      

          frmvalidator.EnableOnPageErrorDisplaySingleBox();
          frmvalidator.EnableMsgsTogether();


           frmvalidator.addValidation("name","req","Please enter your name");
           frmvalidator.addValidation("name","maxlen=20", "Max length for name is 20");
           frmvalidator.addValidation("name","alpha_s","Name can contain alphabetic chars only");
          </script>
        </div>
      </body>
  </head>
</html>

http://stackoverflow.com/questions/27918843/javascript-validate-form-before-submit .. http://stackoverflow.com/questions/27918843/javascript-validate-form-before-submit — Mykola Borysyuk, Oct 10 '16 at 15:08
Look closely there. You have issue with form submit. You need to add a listener to form that will prevent default submiting. Then you can run your validation and stuff and submit it later if all will be ok. Here is the listener example http://stackoverflow.com/questions/7410063/how-can-i-listen-to-the-form-submit-event-in-javascript .. Also validateForm() method ? Do you have it? — Mykola Borysyuk, Oct 10 '16 at 15:15
I accidentally deleted your comment can you provide that agin? @MykolaBorysyuk — Josh Franker, Oct 10 '16 at 15:17
where would this code for the event handler go in my code? @MykolaBorysyuk — Josh Franker, Oct 10 '16 at 15:18
inside script... var ele = /*Your Form Element*/; ele.addEventListener("submit", function(e){e.preventDefault(); //now run your validation}); — Mykola Borysyuk, Oct 10 '16 at 15:20
It even have clear example just for you. document.querySelector("#myForm").addEventListener("submit", function(e){ if(!isValid){ e.preventDefault(); //stop form from submitting } }); — Mykola Borysyuk, Oct 10 '16 at 15:21

score 0 · Answer 1 · answered Oct 10 '16 at 15:30

0

In your case you will need to stop default submiting of form before doing validation.

So in your case something like this.

var frmvalidator  = new Validator("myForm");
      //where myform is the name/id of your form
      frmvalidator.EnableOnPageErrorDisplaySingleBox();
      frmvalidator.EnableMsgsTogether();
      frmvalidator.addValidation("name","req","Please enter your name");
      frmvalidator.addValidation("name","maxlen=20",    "Max length for name is 20");
      frmvalidator.addValidation("name","alpha_s","Name can contain alphabetic chars only");
//add id to form like id="myForm"
document.querySelector("#myForm").addEventListener("submit", function(e){
    e.preventDefault();    //stop form from submitting
    //run your validation code
    var valid = frmvalidator.valid();//your custom validation method
    if(!valid){
       //alert to user
    }
    else {
      //submit form
      e.submit();
    }
});

Hope this helps.

answered Oct 10 '16 at 15:30

Mykola Borysyuk

3,373
1
18
24

No luck. Thanks though. – Josh Franker Oct 10 '16 at 15:35
You sure you clear onsubmit="return validateForm()" and add id to form? – Mykola Borysyuk Oct 10 '16 at 15:37
I have no idea how to do that. this is literally the first morning I have ever looked at custom event handling in web development. – Josh Franker Oct 10 '16 at 15:38
Just remove it from HTML...idk how else i can help((( Sorry but you have to look at those tutorials. And check about default html behaviour before going next. – Mykola Borysyuk Oct 10 '16 at 15:42
You need to add into
and from that tag remove onsubmit="return validateForm()". If you add my code inside your script tag. document.querySelector("#myForm").addEventListener should catch your form submition and if you add console.log() there you will see it. Then go step by step And you will get it.
– Mykola Borysyuk Oct 10 '16 at 15:46

Simple validators not working, new to custom validators

1 Answers1