Question

因此，出于某种原因，当我点击提交按钮时，它似乎并不是指我的validate（）函数。也许它只是没有出现在我的控制台上，但是我的提交按钮/验证功能确定了一些错误。我查找了正确的onSubmit语法，我的validate（）函数似乎正常运行，但单击提交按钮时仍然没有任何反应。所有的建议都非常受欢迎。

html5代码：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
        <script type="text/javascript" src="script.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <title></title>
    </head>
    <body>
        <form onSubmit="return validate()">
        First name: <input id = "firstName" type="text" name="firstname" value=""><br/> 
        Last name: <input id = "lastName" type="text" name="lastname" value="last name"><br/> 
        <div class = "text"><textarea>(Optional Bio)</textarea>
        <p></p> <input type="radio" id = "python">Master Race Python User
        <p></p> <input type="radio" id = "ruby">Imperial Ruby Scum
        </div>

        <div class = "languages">
        <h3>Languages Known</h3>
        <input type="checkbox">Python 
        <input type="checkbox">Ruby
        <input type="checkbox">html
        <input type="checkbox">CSS
        <input type="checkbox">Javascript
        <input type="checkbox">jQuery
        <input type="checkbox">Other
        <input type="checkbox" checked>Filthy casual
        <p><input type ="submit"></p>
        </div>


        </form>
    </body>
</html>

CSS：

.text {
    background-color:#00ffff;
    border:solid black;
    border-radius:3%;
    box-shadow: 5px 5px 5px
}
.languages {
    background-color:#FFFF33;
    border:solid black;
    border-radius:15%;
    box-shadow: 5px 5px 5px;
    margin-top:10px;
}
#check {
    background-color:#ABCDEF;
    border:solid black;
    width:50px;
    margin-left:200px;
    margin-top:10px;
}

#response {
    background-color:#FEDCBA;
}

的javascript / jquery的：

$(document).ready(function(){
    function checkFirstname() {
    var username=$("#firstName").val();
    var namePat = /^[a-z]{2,16}$/i;
    var nameTest = namePat.test(username);

    if(!nameTest) {
        alert("First name may only contain letters and numbers, and must be 2-16 characters in length.");
        return false;
    }
    return true;
}
    function checkLastname() {
    var username=$("#firstName").val();
    var namePat = /^[a-z]{2,16}$/i;
    var nameTest = namePat.test(username);

    if(!nameTest) {
        alert("Last name may only contain letters, and must be 2-16 characters in length.");
        return false;
    }
    return true;
}
function checkSide() {
    var python = document.getElementById("python").checked;
    var ruby = document.getElementById("ruby").checked;

    if(!python && !ruby) {
        alert("Please select a side");
        return false;
    }
    return true;
}
function validate() {
    if(checkFirstname() === false) {
        return false;
    }
    if(checkLastName() ===  false) {
        return false; 
    }
    if(checkSide() === false) {
        return false;
    }
    return true;
}

})

Answer 1

未调用validate函数，因为它不在文档的范围内。相反，它的作用域是一个匿名函数，用作jQuery的document.ready快捷方式的回调函数。为了调用此函数，需要将其暴露给页面的全局范围。一个简单的方法是更改这样的定义：

window.validate = function() {
  if(checkFirstname() === false) {
    return false;
  }
  if(checkLastName() ===  false) {
    return false; 
  }
  if(checkSide() === false) {
    return false;
  }
 return true;
};

一种更实用的方法可能就是将它简单地包含在你的jQuery document.ready快捷方式中，并删除元素上的内联代码（"onSubmit=validate()"）。

$(function(){
 //other code

 $("form")[0].onsubmit = function(){
  return validate();
 }
});

Answer 2

问题是validate在内部定义创建的函数作用域为$document.ready(function ..)，因此函数不绑定到{{1 }}。该特定window.validate仅在内相同的函数范围内可见，因此不在“onsubmit”代码中¹（不在相同的上下文中运行）。

要么......

将函数绑定到validate - 例如window.validate，ick！虽然这会起作用，但它有点混乱和污染window.validate = function () { .. }。或;

动态附加事件 - 例如.select，不内联事件 - 在这种情况下，可以使用给定名称解析函数对象。这通常是一个更清洁的选择和我的建议。

¹确保在将来的问题中包含相关的（控制台）错误消息 - 这将导致“ReferenceError：validate not defined”或类似内容。

我的表单onSubmit =“”语法有点朦胧

2 个答案: