我可以调用 JS 函数吗？如何调用？

Question

Okey community,

 function validate() { var name = document.getElementById("name").value; var p = document.getElementById("pname"); console.log("validating"); // added by PM-77-1 if (name === null) { p.className += " show"; return false; } else { return true; } }

 .split { height: 100%; position: fixed; top: 0; } .left { left: 0; width: 40%; } .right { right: 0; width: 60%; } .form { margin: 30% 5% 30% 5%; } .input { margin: 2% 2% 2% 2%; height: 40px; width: 35%; } .lower { width: 76%; } h6 { background-color: #3399ff; margin-top: 0px; min-height: 50px; max-height: 50px; font-size: 32px; color: white; } button { background-color: #3399ff; color: white; width: 77%; min-height: 50px; border: none; border-radius: 5px; margin-top: 10%; } body { font-family: Futura Md BT; } #map_canvas { height: 100%; } .name { display: none; } .lastname { display: none; } .address { display: none; } .city { display: none; } .country { display: none; } .show { display: block; margin-top: 0px; margin-bottom: 0px; color: red; }

 <div class="split left"> <center> <h6>User Details</h6> <div class="form"> <form action="input.php" method="POST" onsubmit="event.preventDefault(); validate()"> <p class="name" id="pname">Please enter First Name</p> <p class="lastname" id="lastname">Please enter Last Name</p> <p class="address" id="address">Please enter Street / Number</p> <p class="city" id="city">Please enter City</p> <p class="country" id="country">Please enter country</p> <input type="text" class="input" id="name" name="firstname" placeholder="First Name"> <input type="text" class="input" id="lastname" name="lastname" placeholder="Last Name"><br> <input type="text" class="input lower" id="address" name="streetnumber" placeholder="Street / Number"><br> <input type="text" class="input lower" id="city" name="city" placeholder="City"><br> <input type="text" class="input lower" id="country" name="country" placeholder="Country"><br> <button type="submit" onclick="return validate()">Add User</button> </form> </div> </center> </div>

Please test this and tell me why is it not working. I tried everything, but somehow my js is not triggering. I changed ids and everything. Plus tell me if I did right thing in the form with validating default because I am doing that for the first time. Thank you everyone, so much.

I use body onload (to start a google map) but I did not paste that part, it works fine.

Please help me with an example, Thank you so much community !!!

Answer 1

• First of all, in your tag body, you are calling to a function that you don't have defined.
• Second in your onclick of the form, you are putting return functionCall() when its just necessary the function. without the word return.
• Third, I don't know if you saw, but you have in your HTML a lot of ids duplicated, when you can only have 1 ID (that's why its called ID)
• In the Last, I recommend changing your function validate to something like this:

function validate() {
    console.log("eslloooooooo")
    var name = document.querySelector("#name").value;
    var p = document.querySelector("#pname");

    if (name.innerHTML === '') {
        p.classList.add("show");
    }
}

I recommend it cause first, you can use a querySelector that uses CSS selectors and also you can use the option classList of your node to add a class to your item.

Hope this helps you

Answer 2

Your function validate is calling just fine, but some statements inside it are not executing quite well. A few issues here:

1- To add a class to the element p , use p.classList.add("className")

2- When users leave the name field blank, the value is an empty string ( '' ), not null. So, instead of checking:

if (name === null)

Check instead for:

if(name == '')

//or, even shorter:
if(!name)

Therefore, the JS becomes:

function validate() {
  var name = document.getElementById("name").value;
  var p = document.getElementById("pname");

  console.log("validating");

  if (!name) {
    p.classList.add( "show");
    return false;
  } else {
    return true;
  }
}

Answer 3

onclick shouldn't be returning anything, so you can remove the () and just have the function name

<button type="submit" onclick="return validate()">Add User</button>
<!-- Should be -->
<button type="submit" onclick="validate">Add User</button>

Also, you're checking for null when you should be checking for an empty string

if (name === null) { ... }
// Should be
if (name === '') { ... }

Answer 4

当您应该调用 validate() 函数时，看起来您是在主体加载（在您的 HTML 中）上调用 initialize() 。