javascript - 如果在javascript中验证失败,如何停止表单提交
问题描述
需要一些帮助...我研究了有关 stakeoverflow 的解决方案,但由于某种原因,我的带有验证的 HTML 表单仍然提交,但它不应该提交。
<form class="submitForm" action="https://www.google.com" method="POST" id="form" target="_blank" onsubmit="return validateForm()">
<span id="validationMessage" aria-live="polite"></span>
<input class="nameInput" type="text" name="name" value="" id="name" placeholder="Name">
<input class="urlInput" type="url" name="url" value="" id="url" placeholder="https://example.com">
<button type="submit">go!</button>
</form>
我特意从输入字段中删除了required,因为我想编写自己的验证。
但基本上,如果文本输入和url输入字段具有空值,则表单不应该提交。
但是表单仍然提交!我做错了什么?
这是我检查 URL 是否有效的函数。或者如果它的值为空:
function validateForm(data) {
console.log('validate form');
var url = data.url;
var pattern = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
if (pattern.test(url)) {
console.log("Url is valid");
validationMessage.innerHTML = '';
return true;
} else if (url.length === 0 || url === '') {
console.log("Url is not valid!");
validationMessage.innerHTML = 'URL format is not correct. Please check your url';
return false;
}
}
这是我的函数,用于检查文本值字段是否为空:
function validateName(data) {
// console.log('validate form');
console.log('data.name', data.name.length);
if (data.name.length > 1) {
// validationMessage.innerHTML = 'Please input a bookmark name';
console.log('there is a name!');
return true;
} else if (data.name === "" || data.name.length === 0) {
// validationMessage.innerHTML = 'Please input a bookmark name';
console.log('no name!');
return false;
}
}
他们都控制台记录了正确的场景,但表单仍然提交......
更新:为了回答发帖者的问题,这里调用了ValidateName():
// ADD A NEW BOOKMARK
form.addEventListener('submit', function(e){
e.preventDefault();
let data = {
name: nameInput.value,
url: urlInput.value
};
validateName(data);
// validateForm(data);
$.ajax({
url: urlInput.value,
dataType: 'jsonp',
statusCode: {
200: function() {
console.log( "status code 200 returned" );
bookMarksArray.push(data);
console.log("Added bookmark #" + data);
localStorage.setItem("bookMarksArray", JSON.stringify(bookMarksArray));
turnLoadingStateOn(bookMarksArray);
},
404: function() {
console.log( "status code 404 returned. cannot add bookmark" );
}
}
});
});
解决方案
实际上,如果您不想提交表单,则需要从提交处理程序返回 false
var namevalid = validateName(data);
!namevalid ? return false : null;
推荐阅读
- unity3d - 坚持更改着色器反照率 alpha 平滑度
- go - 使用来自未导入包的类型的返回值
- excel - 更改excel中的数据视图
- php - 具有可自定义颜色的 WordPress 主题
- java - Java - 创建多个对象后如何避免 StackOverflow?
- javascript - 使用 React Native 显示 Firebase 数据
- gitlab - Gitlab无法启动运行v没有运行
- python - 如何处理从 Optimizer.compute_gradients 获得的梯度?
- ios - 如何在 UI 中显示活动指示器,同时使用文件管理器创建文件
- database - 本机模式下的 Firestore DB 文档写入限制