im trying to execute a js script on my web page to verify the entry in form before putting it on data base but it don't work, the forum accept everything i put even its wrong

thats my js code i put it in head ( i tried putting it in body too but the same problem)

<script>
    function test() {
      name=f.name.value;
      email=f.email.value;
      phone=f.phone.value;
      for (i=0;i< length(name) ;i  ){
        if(name.charAt(name[i])<'a' || nom.charAt(name[i])>'z' || name.charAt(name[i])<'A' || name.charAt(name[i])>'Z')
          {
            alert("verify your name");
            return false;
          }
        }
  
        if (isNaN(phone) || phone.length!=8  )
            {
            alert("verify your phone number");
            return false;
            }
            at=email.indexOf('@')
            point=email.indexOf('.',at)
        if(email=="" || at==-1 || point==-1)
        {
            alert("verify your email");
            return false;
        } 
  
      }
  </script>

and that's the form code in html

<form action="add.php" method="POST" role="form"  data-aos="fade-up" data-aos-delay="100" name='f'  onsubmit='return test()'>
          <div >
            <div >
              <input type="text" name="name"  id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars">
              <div ></div>
            </div>
            <div >
              <input type="email"  name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email">
              <div ></div>
            </div>
            <div >
              <input type="text"  name="phone" id="phone" placeholder="Your Phone" data-rule="minlen:4" data-msg="Please enter at least 4 chars">
              <div ></div>
            </div>
            <div >
              <input type="date" name="date"  id="date" placeholder="Date" data-rule="minlen:4" data-msg="Please enter at least 4 chars">
              <div ></div>
            </div>
            <div >
              <input type="time"  name="time" id="time" placeholder="Time" data-rule="minlen:4" data-msg="Please enter at least 4 chars">
              <div ></div>
            </div>
            <div >
              <input type="number"  name="people" id="people" placeholder="# of people" data-rule="minlen:1" data-msg="Please enter at least 1 chars">
              <div ></div>
            </div>
          </div>
          <div >
            <textarea  name="message" rows="5" placeholder="Message"></textarea>
            <div ></div>
          </div>
          <div >
          </div><div ><button onclick="test()" type="submit" name="ok">Book a table</button></div>
        </form>

CodePudding user response：

you are not declaring your variable. like const name=f.name.value; also f in your decleration doesn't mean anything in your javascript. first you need to select the element you need using queryselector for that you can check this documentation https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector also it is not a good idea to call the function using onclick in the html. call the function you want on the element you selected using queryselector with addeventlistener for that you can check this documentation https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener also instead of length(name) you should use name.length

CodePudding user response：

The length(name) broke the function (use name.length instead). It could therefore not return false and prevent the form from submitting. I also cleaned up a few other bits in your markup.

It is not considered good style to use names like f directly in your code, although it clearly refers to the named form on your page. To make your code more easy to read (and more stable in maintaining it) you should declare a constant like this:

const f = document.querySelector("form[name=f]");

This make f "un-assignable" in the rest of your code. Otherwise an erroneous f=123;, placed somewhere in your code, might have broken the functionality.

f.onsubmit=function(ev){
  const name = f.name.value,
    email = f.email.value,
    phone = f.phone.value;
  for (i = 0; i < name.length; i  ) {
    if (name.charAt(name[i]) < 'a' || nom.charAt(name[i]) > 'z' || name.charAt(name[i]) < 'A' || name.charAt(name[i]) > 'Z') {
      alert("verify your name");
      return false;
    }
  }

  if (isNaN(phone) || phone.length != 8) {
    alert("verify your phone number");
    return false;
  }
  at = email.indexOf('@')
  point = email.indexOf('.', at)
  if (email == "" || at == -1 || point == -1) {
    alert("verify your email");
    return false;
  }
}

<body>
  <form action="add.php" method="POST" role="form"  data-aos="fade-up" data-aos-delay="100" name='f'>
    <div >
      <div >
        <input type="text" name="name"  id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars">
        <div ></div>
      </div>
      <div >
        <input type="email"  name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email">
        <div ></div>
      </div>
      <div >
        <input type="text"  name="phone" id="phone" placeholder="Your Phone" data-rule="minlen:4" data-msg="Please enter at least 4 chars">
        <div ></div>
      </div>
      <div >
        <input type="date" name="date"  id="date" placeholder="Date" data-rule="minlen:4" data-msg="Please enter at least 4 chars">
        <div ></div>
      </div>
      <div >
        <input type="time"  name="time" id="time" placeholder="Time" data-rule="minlen:4" data-msg="Please enter at least 4 chars">
        <div ></div>
      </div>
      <div >
        <input type="number"  name="people" id="people" placeholder="# of people" data-rule="minlen:1" data-msg="Please enter at least 1 chars">
        <div ></div>
      </div>
    </div>
    <div >
      <textarea  name="message" rows="5" placeholder="Message"></textarea>
      <div ></div>
    </div>
    <div >
    </div>
    <div ><button>Book a table</button></div>
  </form>
</body>
<script>

</script>