1

所以由于某种原因，当我点击提交按钮时，它似乎并不是指我的 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;
}

})
4

2 回答 2

1

验证函数没有被调用，因为它不在文档的范围内。相反，它被限定在一个匿名函数内，用作 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();
 }
});
于 2013-09-20T21:25:58.623 回答
0

问题在于它是在创建的函数范围内定义validate的，因此该函数未绑定到. 该特定内容仅在同一函数范围内的代码中可见，因此不在“onsubmit”代码1（不在同一上下文中运行）的范围内。$document.ready(function ..)window.validatevalidate

任何一个 ..

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

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

1确保在未来的问题中包含相关（控制台）错误消息 - 这将导致“ReferenceError：验证未定义”或类似的。

于 2013-09-20T21:21:33.087 回答