JQuery在Chrome扩展选项页面中验证 [英] Jquery validate within chrome extension options page
问题描述
对于这个和JavaScript以及一般编码都是全新的，所以在我开始之前，我的道歉就会消失。
我一直在尝试使用 jquery.validate.min.js 来检查Chrome扩展程序的文本输入选项页面我一直在尝试创建。
当我在
我使用了扩展名选项示例并获得相同的结果。
mainfest.json
{
manifest_version ：2，
name：Options Test extension，
version：1.0，
options_ui：{
page： options.html，
chrome_style：true
}
}
options.html
<！DOCTYPE html>
< html>
< head>
< title>我的测试扩展程序选项< / title>
< style>
body：{padding：10px; }
< / style>
< / head>
< body>
< form id =form_a>
最喜欢的颜色：
< select id =color>
< option value =red> red< / option>
< option value =green>绿色< / option>
< option value =blue>蓝色< / option>
< option value =yellow>黄色< / option>
< / select>
< label>
< input type =checkboxid =like>
我喜欢颜色。
< / label>
< div id =status>< / div>
< button id =save>储存< /按钮>
< / form>
< script src =options.js>< / script>
< / body>
< / html>
options.js
//将选项保存到chrome.storage.sync。
函数save_options（）{
var color = document.getElementById（'color'）。value;
var likesColor = document.getElementById（'like'）。checked;
chrome.storage.sync.set（{
favoriteColor：color，
likesColor：likesColor
}，function（）{
//更新状态以让用户知道
var status = document.getElementById（'status'）;
status.textContent ='保存的选项';
setTimeout（function（）{
status。 textContent ='';
}，750）;
}）;
}
//使用存储在chrome.storage中的首选项
//恢复选择框和复选框状态。
函数restore_options（）{
//使用默认值color ='red'和likesColor = true。
chrome.storage.sync.get（{
favoriteColor：'red'，
likesColor：true
}，function（items）{
document.getElementById（' color'）。value = items.favoriteColor;
document.getElementById（'like'）。checked = items.likesColor;
}）;
}
document.addEventListener（'DOMContentLoaded'，restore_options）;
document.getElementById（'save'）。addEventListener（'click'，
save_options）;
当我无法使用<< ; form> ，用于我在自己的扩展中输入的文本内容？
通过东西横向移动很可能是元素。
如果这样的元素位于< form> 元素，默认的行为就像一个提交按钮。这不是你想要的：它重新加载页面（显然有一个额外的效果，不应用 chrome_style ，因为它没有显式加载作为选项页面）。
您可以通过指定按钮类型来解决问题：
<按钮type =buttonid =save>储存< /按钮>
或者，您可以调用 preventDefault（）在 save_options 中的事件对象上（如果添加了一个事件参数）。但指定一个按钮类型更清洁。
Completely new to this and JavaScript and coding in general so my apologies go out before I start.
I've been trying to use jquery.validate.min.js to check text inputs for a chrome extension's Options page I've been trying to create.
Things just go sideways when I add <form> tag to the options.html page: as soon as you click save button all the options_ui.chrome_style formatting is lost.
I've used chrome extension options example and get the same results.
mainfest.json
{
"manifest_version": 2,
"name": "Options Test extension",
"version": "1.0",
"options_ui": {
"page": "options.html",
"chrome_style": true
}
}
options.html
<!DOCTYPE html>
<html>
<head>
<title>My Test Extension Options</title>
<style>
body: { padding: 10px; }
</style>
</head>
<body>
<form id="form_a">
Favorite color:
<select id="color">
<option value="red">red</option>
<option value="green">green</option>
<option value="blue">blue</option>
<option value="yellow">yellow</option>
</select>
<label>
<input type="checkbox" id="like">
I like colors.
</label>
<div id="status"></div>
<button id="save">Save</button>
</form>
<script src="options.js"></script>
</body>
</html>
options.js
// Saves options to chrome.storage.sync.
function save_options() {
var color = document.getElementById('color').value;
var likesColor = document.getElementById('like').checked;
chrome.storage.sync.set({
favoriteColor: color,
likesColor: likesColor
}, function() {
// Update status to let user know options were saved.
var status = document.getElementById('status');
status.textContent = 'Options saved.';
setTimeout(function() {
status.textContent = '';
}, 750);
});
}
// Restores select box and checkbox state using the preferences
// stored in chrome.storage.
function restore_options() {
// Use default value color = 'red' and likesColor = true.
chrome.storage.sync.get({
favoriteColor: 'red',
likesColor: true
}, function(items) {
document.getElementById('color').value = items.favoriteColor;
document.getElementById('like').checked = items.likesColor;
});
}
document.addEventListener('DOMContentLoaded', restore_options);
document.getElementById('save').addEventListener('click',
save_options);
How would I go about validating inputs when I can't use the <form>, for the text inputs I have in my own extension?
What you mean by "things go sideways" is likely the default behavior of <button> elements.
If such an element is inside a <form> element, the default is to behave like a submit button. That's not what you want: it reloads the page (which apparently has an added effect of not applying chrome_style as it's not explicitly loaded "as the options page").
Your problems can be fixed by specifying the button type:
<button type="button" id="save">Save</button>
Alternatively, you could call preventDefault() on the event object in save_options (if you added an event parameter). But specifying a button type is cleaner.
这篇关于JQuery在Chrome扩展选项页面中验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
