为什么验证不能在javascript中的所有代码中工作，即使我没有写出它不提醒任何内容的名称

Question

虽然有效，但我不知道发生了什么，现在它无法正常工作。也许我的另一段代码中存在问题。我在import React, { Component } from 'react'; import { Circle } from 'react-leaflet'; class Foo extends Component { render() { const { center, radius } = this.props; return ( <Circle ref={circle => { this.circle = circle; }} center={center} radius={radius} onMouseOver={() => { this.circle.leafletElement.bindPopup('foo').openPopup(); }}/> ); } } export default Foo; 中的javascript和head区域中的html

1. 不能正常使用javascript验证

   • 即使我提交时没有写我的名字，它也不会提醒我。
     • 或其他领域。

2. 复选框验证无法正常工作

body

function valid() {

  var fname = document.getElementById("fname").value;
  if (fname == "") {
    alert("Shkruani emrin");
    document.getElementById("fname");
    return false;
  }
  var lname = document.getElementById("lname").value;
  if (lname == "") {
    alert("Enter Lastname");
    document.getElementById("lname");
    return false;
  }
  var birthdat = document.getElementById("birthdat").value;
  if (birthdat == "") {
    alert("Enter birthday");
    document.getElementById("birthdat");
    return false;
  }
  var email = document.getElementById("email").value;
  if (email == "") {
    alert("Enter email");
    document.getElementById("email").focus();
    return false;
  }
  var atpos = email.indexOf("@");
  var dotpos = email.lastIndexOf(".");
  if (atpos < 0 || dotpos < atpos + 1 || dotpos + 1 >= email.length) {
    alert("Nuk eshte e-mail adrese valide");
    return false;
  }
  var check = document.getElementById("thebox").checked;
  if (check) {
    alert("Thank you!");
  } else {
    alert("Are you a robot not checked!");
    document.getElementById("thebox");
    return false;
  }

}

Answer 1

将JavaScript放在最终正文标记之前的页面底部。这样，在您尝试执行任何操作之前，已加载页面的其余部分。

Answer 2

请尝试使用以下代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div class="container">
  <form name=formac onsubmit="return valid();" method="post" autocomplete="on">
    <fieldset><label for="fname">First Name</label>
      <input type="text" id="fname" name="firstname" placeholder="Your name.." autocomplete="off">
      <br>
      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lastname" placeholder="Your last name..">
      <br>
      <label for="birthday">Birthday </label>
      <input type="text" id="birthdat" pattern="(0[1-9]|1[0-9]|2[0-9]|3[01]).(0[1-9]|1[012]).[0-9]{4}" title="Day.Moth.Year" name="birthday" placeholder="Your date of birth.." style="margin-left: 17px;">
      <br>
      <label for="email">Email </label>
      <input type="email" id="email" name="emailadsdres" placeholder="Your email address..">
      <br>
      <label for="phone">Phone 
        <input type="tel" id="phone"  pattern="[0-9]{1}[0-9]{9}" name="phone" placeholder="Your phone number.." title="10 digit phone eg:1234569877" autocomplete="off">
    <br>
        <label for="city">City </label>
      <select id="city" name="city">
         <datalist> <option value="zurich">Zurich</option>
          <option value="geneva">Geneva</option>
          <option value="basel">Basel</option>
          <option value="bern">Bern</option>
          <option value="lugano">Lugano</option>
          <option value="vernier">Vernier</option>
          <option value="uster">Uster</option>   
          <option value="thun">Thun</option>   
          <option value="sior">Sior</option>   
    </datalist>
        </select>
      <br>
      <p> Are you a robot?

        <input type="checkbox" id="thebox" name="thebox"> I'm not a robot.<br>
      </p>
      <br>
      <textarea id="subject" name="subject" placeholder="Write something.." style="height:70px"></textarea>
      <button type="button" id="btn1">Great</button>
      <button type="button" id="btn2">Good</button>
      <button type="button" id="btn3">Bad</button>

      <br>
      <input style="outline-style:inset; outline-offset: 10px;" type="submit" value="Submit">

    </fieldset>
  </form>

  <label>Optional email</label><input type="text" name="" form="formac"></div>
<table style="width:100%">
<script>
	function valid() {
  var check = document.getElementById("thebox").checked; //>not working
  if (check) {
    alert("Thank you!");
  } else {
    alert("Are you a robot not checked!");
    document.getElementById("thebox");
    return false;
  }
  var fname = document.getElementById("fname").value;
  if (fname == "") {
    alert("Shkruani emrin");
    document.getElementById("fname");
    return false;
  }
  var lname = document.getElementById("lname").value;
  if (lname == "") {
    alert("Enter Lastname");
    document.getElementById("lname");
    return false;
  }
  var birthdat = document.getElementById("birthdat").value;
  if (birthdat == "") {
    alert("Enter birthday");
    document.getElementById("phone");
    return false;
  }
  var email = document.getElementById("email").value;
  if (email == "") {
    alert("Enter email");
    document.getElementById("email").focus();
    return false;
  }
  var atpos = email.indexOf("@");
  var dotpos = email.lastIndexOf(".");
  if (atpos < 0 || dotpos < atpos + 1 || dotpos + 1 >= email.length) {
    alert("Nuk eshte e-mail adrese valide");
    return false;
  }
  var phone = document.getElementById("phone").value;
  if (!phone) {
    alert("Enter the phone number ");
    document.getElementById("phone").focus();
    return false;
  }
}
</script>