我正在尝试验证我的表单,因为用户在单击按钮时输入信息,而不是提交。我正在尝试制作一些东西来检测文本框中的文本是否是默认值。但是,它不起作用。
我不太熟悉 jquery 验证器。这是我到目前为止所拥有的。
$(document).on("click", "#numexercisesbutton, #submitworkout",
function() { //adds exercises
jQuery.validator.addMethod("notEqual", function(value,
element, param) {
return this.optional(element) || value !== param;
}, "Please choose a value!");
$("#addworkout").validate({
rules: {
weightinputboxes: {
required: true,
notEqual: "Enter Weight"
}
},
messages: {
weightinputboxes: {
notEqual: "please enter a value"
}
}
}
)
if ($("#addworkout").valid()) {
addexercises.call(this);
}
});
不确定为什么它不起作用。我试图模仿这篇文章:jQuery Validate: Not default value
编辑 HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="/static/jquery-1.7.2.min.js"> </script>
<script type="text/javascript" src="/static/jquery-ui-1.8.21.custom.min.js"> </script>
<link rel="stylesheet" href="/static/jquery-ui-1.8.21.custom.css" type="text/css">
<script type="text/javascript" src="/static/jquery.validate.js"> </script>
<script type="text/javascript" src="/static/jquery.validate.min.js"> </script>
<link rel="stylesheet" href="/static/addworkout.css" type="text/css">
<script type="text/javascript" src="/static/addworkout.js"></script>
</head>
{% extends "masterpage.html" %}
{% block content %}
<body>
<form action="/submitworkout/" method="get" id="addworkout">
<div id="workoutentrycontainer">
<div id="exercisesthisworkout">
<p>Workout Date: </p>
<input type="text" class="required" id="workoutdate" name="workoutdate">
<p>Body Weight:</p>
<input type="text" class="textbox" id="weight" name="weight">
<p>How many unique exercises</p>
<input type="text" class="textbox required" id="numexercises" name="numexercises">
<input type="button" class="button" value="Add" id="numexercisesbutton">
<input type="text" value="Enter Weight" name="weightinputboxes" class="required">
</div>
</div>
</form>
</body>
{% endblock %}
</html>