JavaScript don't execute in html file

Question

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>

so where is f defined in your function?, what is length(name) or where is it defined? — Daniel Faure
– Daniel Faure, Commented Apr 24, 2022 at 17:52

Carsten Massmann · Accepted Answer · 2022-04-24 21:45:16Z

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>

edited Apr 24, 2022 at 21:45

answered Apr 24, 2022 at 18:03

Carsten Massmann

28.4k3 gold badges25 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ayoub touti Over a year ago

i did everything as you said but its still not working i even copied the code as yours and no change happened

Carsten Massmann Over a year ago

Hmmm, it works in this snippet here, so there must be an error somewhere on your page that causes an error and prevents the function from working. Have you checked your console for a possible output?

Carsten Massmann Over a year ago

A good strategy in these cases is to "start small". remove your original script and start with a minimum event-handling function like function(ev){ev.preventDefault(); console.log("submitting has been avoided!"); return false;}. I don't know whether returning false is still necessary - but better safe than sorry ;-).

Carsten Massmann Over a year ago

I am glad to hear that!

Elham · Accepted Answer · 2022-04-24 18:02:59Z

1

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

answered Apr 24, 2022 at 18:02

Elham

857 bronze badges

Comments

ayoub touti · Accepted Answer · 2022-04-24 21:41:27Z

0

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>

answered Apr 24, 2022 at 21:41

ayoub touti

357 bronze badges

Collectives™ on Stack Overflow

JavaScript don't execute in html file

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related