.wrap();防止断裂.Default();
.wrap(); breaking prevent.Default();
我已经编写了一个自定义表单验证脚本,但由于某些原因,将input[type=text]
元素包装在<div class="inputWrapper" />
中会阻止input[type=submit]
的默认设置。
这是相关代码:
$("input[type=text]").wrap("<div class='"inputWrapper'" />");
正在中断:
$("input[type=submit]").click(function(event) {
event.preventDefault();
});
为什么会发生这种情况?如果你需要更完整的剧本,请告诉我,我会把整件事都发布出来。
好吧,出于某种原因,禁用这行代码可以让input[type=submit]
上的.preventDefault
工作,但如果我只使用
// wrap inputs
$("input[type=text]").wrap("<div class='"inputWrapper'" />");
// validate on form submit
$("input[type=submit]").click(function(event) {
event.preventDefault();
});
它运行良好。这是完整的剧本,是什么导致了这种怪异?
$(document).ready(function() {
// wrap inputs
$("input[type=text]").wrap("<div class='"inputWrapper'" />");
$("textarea").wrap("<div class='"inputWrapper'" />");
// validate text inputs on un-focus
$("input[type=text].required").blur(function() {
if ($(this).hasClass("error")) {
// do nothing
} else if ($(this).val() === "") {
$(this).addClass("error");
$(this).parent(".inputWrapper").append("<div class='"errorPopup'">" + $(this).attr("placeholder") + "</div>");
}
});
// validate textareas on un-focus
$("textarea.required").blur(function() {
if ($(this).hasClass("error")) {
// do nothing
} else if ($(this).val() === "") {
$(this).addClass("error");
$(this).parent(".inputWrapper").append("<div class='"errorPopup'">" + $(this).attr("placeholder") + "</div>");
}
});
// validate on form submit
$("input[type=submit]").click(function(event) {
event.preventDefault();
// check fields
$(this).parent("form").children("input.required").each(function() {
// check textboxes
if ($(this + "[type=text]")) {
if (!$(this).val()) {
$(this).addClass("error");
};
};
// end textboxes
// check textareas
$(this).parent("form").children("textarea.required").each(function() {
if (!$(this).val()) {
$(this).addClass("error");
};
});
// end textareas
// check checkboxes and radio buttons
if ($(this).is(":checkbox") || $(this).is(":radio")) {
var inputName = $(this).attr("name");
if (!$("input[name=" + inputName + "]").is(":checked")) {
var inputId = $(this).attr("id");
$("label[for=" + inputId + "]").addClass("error");
};
};
// end checkboxes and radio buttons
});
// end fields
// submit form
var errorCheck = $(this).parent("form").children(".error").length > 0;
if (errorCheck == 0) {
$(this).parent("form").submit();
} else {
alert("You didn't fill out one or more fields. Please review the form.");
window.location = "#top";
};
// end submit form
});
// clear errors
$("input.required").each(function() {
// clear textboxes
if ($(this + "[type=text]")) {
$(this).keypress(function() {
$(this).removeClass("error");
$(this).next(".errorPopup").remove();
});
};
// end textboxes
// clear textareas
$("textarea.required").each(function() {
$(this).keypress(function() {
$(this).removeClass("error");
$(this).next(".errorPopup").remove();
});
});
// end textareas
// check checkboxes and radio buttons
if ($(this).is(":checkbox") || $(this).is(":radio")) {
var inputName = $(this).attr("name");
var labelFor = $(this).attr("id");
$(this).click(function() {
$("input[name=" + inputName + "]").each(function() {
var labelFor = $(this).attr("id");
$("label[for=" + labelFor + "]").removeClass("error");
});
});
};
// end checkboxes and radio buttons
});
// end clear textbox errors
});
好吧,我错了。它与我认为的行有关,但在我包装输入后,它实际上在查找.error
时遇到了问题。
以下是问题所在:
var errorCheck = $(this).parent("form").children(".error").length > 0;`'
var errorCheck = $(this).parent("form").children(".error").length > 0;
当您.wrap
文本输入时,它们不再是表单的子级。使用.find
顺便说一下,$(this + "selector")
无效。您可能想要使用$(this).is("selector")
您将需要使用新的DOM元素维护某种引用。这将首先将其作为一个初始化的DOM元素放在一个变量中(而不是像您那样作为字符串(,原始元素也是如此,原始元素将被放回以维护事件:
var $inputWrapper = $("<div class='"inputWrapper'" />"),
$inputText = $("input[type=text]");
$inputText.wrap("<div class='"inputWrapper'" />");
然后您可以将元素替换回.
相关文章:
- Setting default onclick behavior for <img> tag in gene
- 如何从ajax调用返回.wrap()元素
- <text区域>在我的html中包含event.keycode==13之后,wrap就不起作用了
- 如何在事件处理程序的回调中防止Default
- .wrap()和.wrapAll()出现jQuery插件错误
- 更改TogetherJS中的DEFAULT NAMES
- Gruntfile.js-找不到任务“default”
- 像 exports.default = (0, _createHelper2.default)(pure, 'pure'
- jQuery, Javascript : Javascript wrap in jQuery(), $() - 这是什么
- Typescript class.default 不是构造函数
- 正在default.aspx中调用jquery
- 如何在选项卡或浏览器以角度关闭时防止Default()
- 如何在default.aspx中包含外部jQuery文件
- wrap() 不能很好地与 after() 一起使用
- Angularjs ng-show not working with checkbox with default val
- 如何在.wrap()中使用变量
- .wrap()在与resize函数一起使用时多次添加选择器
- 在Meteor中使用fs模块获取Uncaught TypeError _fs2.default.readFile不是函数
- 调用$mdDialog(Angular Material)Confirmation而不是Default Javascri
- .wrap();防止断裂.Default();