'JavaScript don't execute in html file

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" class="php-email-form" data-aos="fade-up" data-aos-delay="100" name='f'  onsubmit='return test()'>
          <div class="row">
            <div class="col-lg-4 col-md-6 form-group">
              <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars">
              <div class="validate"></div>
            </div>
            <div class="col-lg-4 col-md-6 form-group mt-3 mt-md-0">
              <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email">
              <div class="validate"></div>
            </div>
            <div class="col-lg-4 col-md-6 form-group mt-3 mt-md-0">
              <input type="text" class="form-control" name="phone" id="phone" placeholder="Your Phone" data-rule="minlen:4" data-msg="Please enter at least 4 chars">
              <div class="validate"></div>
            </div>
            <div class="col-lg-4 col-md-6 form-group mt-3">
              <input type="date" name="date" class="form-control" id="date" placeholder="Date" data-rule="minlen:4" data-msg="Please enter at least 4 chars">
              <div class="validate"></div>
            </div>
            <div class="col-lg-4 col-md-6 form-group mt-3">
              <input type="time" class="form-control" name="time" id="time" placeholder="Time" data-rule="minlen:4" data-msg="Please enter at least 4 chars">
              <div class="validate"></div>
            </div>
            <div class="col-lg-4 col-md-6 form-group mt-3">
              <input type="number" class="form-control" name="people" id="people" placeholder="# of people" data-rule="minlen:1" data-msg="Please enter at least 1 chars">
              <div class="validate"></div>
            </div>
          </div>
          <div class="form-group mt-3">
            <textarea class="form-control" name="message" rows="5" placeholder="Message"></textarea>
            <div class="validate"></div>
          </div>
          <div class="mb-3">
          </div><div class="text-center"><button onclick="test()" type="submit" name="ok">Book a table</button></div>
        </form>

javascript html

Solution 1:^[1]

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 makes 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" class="php-email-form" data-aos="fade-up" data-aos-delay="100" name='f'>
    <div class="row">
      <div class="col-lg-4 col-md-6 form-group">
        <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars">
        <div class="validate"></div>
      </div>
      <div class="col-lg-4 col-md-6 form-group mt-3 mt-md-0">
        <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email">
        <div class="validate"></div>
      </div>
      <div class="col-lg-4 col-md-6 form-group mt-3 mt-md-0">
        <input type="text" class="form-control" name="phone" id="phone" placeholder="Your Phone" data-rule="minlen:4" data-msg="Please enter at least 4 chars">
        <div class="validate"></div>
      </div>
      <div class="col-lg-4 col-md-6 form-group mt-3">
        <input type="date" name="date" class="form-control" id="date" placeholder="Date" data-rule="minlen:4" data-msg="Please enter at least 4 chars">
        <div class="validate"></div>
      </div>
      <div class="col-lg-4 col-md-6 form-group mt-3">
        <input type="time" class="form-control" name="time" id="time" placeholder="Time" data-rule="minlen:4" data-msg="Please enter at least 4 chars">
        <div class="validate"></div>
      </div>
      <div class="col-lg-4 col-md-6 form-group mt-3">
        <input type="number" class="form-control" name="people" id="people" placeholder="# of people" data-rule="minlen:1" data-msg="Please enter at least 1 chars">
        <div class="validate"></div>
      </div>
    </div>
    <div class="form-group mt-3">
      <textarea class="form-control" name="message" rows="5" placeholder="Message"></textarea>
      <div class="validate"></div>
    </div>
    <div class="mb-3">
    </div>
    <div class="text-center"><button>Book a table</button></div>
  </form>
</body>
<script>

</script>

Solution 2:^[2]

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

Solution 3:^[3]

update : with Mr carsten help i fixed the problem and here is the code if anyone needed it

<script lang="javascript">
  const f = document.querySelector("form[name=f]");
  f.onsubmit=function(ev){

  const name = f.name.value,
    email = f.email.value,
    phone = f.phone.value;
    pp= f.people.value;
    var letters = /^[A-Za-z- ]+$/;

    if( ! name.match(letters)){
      alert("Verify your name");
      return false;
    }

    if (isNaN(phone) ) {
    alert("verify your phone number");
    return false;
  }

  if (phone.length != 8){
    alert("verify your phone number");
    return false;
  }
  
}
</script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Elham
Solution 3	ayoub touti

'JavaScript don't execute in html file

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]