在用a标签作为提交按钮或者ajax提交表达时required无效的解决办法

最新推荐文章于 2023-03-24 10:33:55 发布
最新推荐文章于 2023-03-24 10:33:55 发布
阅读量1.7k 收藏 1
点赞数
分类专栏： html5 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42884584/article/details/83273027
版权

1.ajax提交表单时,代码

<form id="sub">
   <input type="text" name="name" required />
   <input type="submit" id="submit" />
</form>

<script>
   $("#sub").submit(function(){
      $.ajax({
        ...
     })
   });
</script>

2.用a标签作为提交按钮时，代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8 />
<title></title>
<style type="text/css">
</style>
<script type="text/javascript">
    function sub ()
    {
        document.getElementById ('sub').click ();
    }
</script>
</head>
<body>
    <form name="form">
        <input type="text" required="required" /> 
        <input style="display: none;" type="submit" id="sub" value="submit" />
    </form>
    <a href="#" onclick="sub();">submit</a>
</body>
</html>

参考：https://blog.csdn.net/PlainWaterh/article/details/56836974

爱好jyh
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
利用ajax提交表单完整流程
04-19
虽然现代浏览器普遍支持AJAX，但在处理老版本浏览器时，我们可能需要使用`ActiveXObject`（IE浏览器）作为备选方案。 ### 9. 使用库或框架 在实际项目中，开发者往往选择使用jQuery、axios、fetch等库或框架来简化...
Java表单重复提交的避免方法
08-31
Java表单重复提交是Web开发中常见的问题，可能导致数据不一致和系统异常。要理解这个问题，首先要...此外，还可以结合前端JavaScript来控制提交行为，比如禁用提交按钮，或者使用AJAX异步提交，进一步提高用户体验。
ajax提交表单 required 无效
葬爱家族王富贵
03-17 1180
荆轲刺秦王 在前端用户提交表单的时候，我们经常会加一些验证，例如数字在 0-100 不能输入空格等等 本文实现的例子有：1.输入框不能输入空格 2.bootstrap状态开关按钮 <!DOCTYPE html> <html> <head> {include file="public/head"} <style> ...
关于Jquery 获取表单FORM所有元素进行AJAX提交
热门推荐
正文
12-25 3万+
前提交代： 获取 表单FROM所有的元素可以采用var a = $('#form_id').serializeArray() 进行获取； var form_data = $.serializeArray() 获取的数据以对象结构返回，如： { [‘name’='a', 'value'='1'], [‘name’='b', 'value'='2'] } 注意：$.serializeArray
解决form表单通过ajax时，required失效问题
廖__的博客
01-25 2066
问题： 最近在写注册功能时，用ajax时required时遇到了失效的问题后面我发现了原来required要写在包含有form表单的input，并且要绑定在form的submit事件上，require可无法阻止你按按扭，只是能阻止你提交表单。而我要用ajax实现post请求，一开始前端是没有用form表单的，加入form后ajax会自动变成get请求，这是因为加入form标签后变成了表单的sumb...
ajax不验证required,关于django：在ajax视图上，login_required装饰器返回401而不是302
weixin_29943753的博客
08-06 251
在编写一些视图以响应Ajax请求时，我发现login_required装饰器对于未通过身份验证的用户始终返回302状态码有些奇怪。由于这些视图是ajax视图，因此这似乎有些不合适。我不希望用户在这种情况下登录，但我希望Django告诉客户端访问此视图需要身份验证(我认为401应该是正确的状态代码)。为了实现这一点，我开始编写自己的装饰器login_required_ajax，但这在某种程度上超出了...
js错误--引发表单验证插件中的required属性失效，一些js功能失效
u010343799的博客
06-06 4405
感觉body标签中代码没有错误，但就是单验证插件中的required属性失效，文件上传也失效。 解决：由于标点符号});缺失。F12在调试页中可以查看js错误提示，修正即可。
在表单提交前进行验证的几种方式整理
09-05
如示例代码所示，使用jQuery库的`$(document).ready()`确保DOM加载完成后再绑定`submit`事件，这样在用户点击提交按钮时会先执行验证逻辑。 2. **自定义验证函数**： 创建一个函数，检查输入字段的值是否符合预期...
JS用户反馈表单提交代码
07-24
在JavaScript（JS）中，创建一个用户反馈表单提交功能是一项常见的任务，它涉及到前端交互设计和后端数据处理。本项目"JS用户反馈表单提交代码"提供了一个具有星空背景的用户反馈表单，旨在增强用户体验并收集有价值...
带流程的注册表单提交验证html模板.zip
10-05
8. **表单序列化**：在使用AJAX提交表单时，可能需要将表单数据序列化为JSON或其他格式，便于传递到服务器。JavaScript的`FormData`对象和`serialize()`函数可以帮助实现这一功能。 9. **响应式设计**：现代网页应...
html必须用ajax吗,jQuery或AJAX会使HTML“required”属性无效吗？
weixin_29378975的博客
06-17 164
我正在构建一个注册页面，并根据需要标记了用户名和密码输入。简单代码为：jQuery或AJAX会使HTML“required”属性无效吗？Username Password Registervar username = $("#username").val();var password = $("#password").val();var userData = "username=" + use...
ajax不能触发,为什么ajax请求不能触发验证
weixin_34307867的博客
08-05 263
我有一个动态生成的表单。表单内部是执行AJAX请求的函数，成功时修改用于验证的隐藏字段的值(将其设置为空字符串)(隐藏字段设置为“required：true”)为什么ajax请求不能触发验证但是，在成功执行该函数后，隐藏字段不会触发jQuery的验证，我可以提交表单。只有当我有意识地触发其他字段的验证时才会触发隐藏字段的验证，并且会出现隐藏字段的错误消息以及其他错误消息。功能：function D...
HTML5 required属性
weixin_34060741的博客
03-01 353
required属性可以规定表单元素为必须。 代码实例如下: 01 02 03 04 05 06 07 08 09 10 11 12 13 14 <!doctype html> <html> <head> <meta charset="utf-8"> <meta na...
AJAX提交表单 H5input的部分属性（required）仍然有效
mingzaily博客
12-07 1537
HTML代码 &lt;form onsubmit="comment()" id="form_comment" action="javascript:void(0)"&gt; &lt;input type="text" name="article_id" /&gt; &lt;li class="list-group-item"&gt;
如果是Ajax提交表单的话，＜input type=“text“ required /＞可以阻止表单提交吗？
长风破浪会有时的博客
03-24 191
在上面的示例中，当用户点击提交按钮时，会阻止表单的默认提交行为，然后获取表单中所有元素的值，进行验证。属性，可以通过 JavaScript 手动检查表单元素的值。元素，则给出错误提示，并返回，不再继续执行表单提交的 Ajax 代码。对象来获取表单数据，并对表单元素的值进行验证，如果存在未填写的。当使用 Ajax 技术提交表单时，浏览器不会自动检查表单的。属性，因为这种提交方式不会触发浏览器的默认表单提交行为。元素，则阻止表单提交，并给出相应的错误提示。如果想要在 Ajax 提交表单时也检查。
【layui采坑日记】ajax表单按钮提交不验证lay-verify="required" 无效解决办法
CaiXinXing的CSDN博客
05-08 5859
错误写法 <button class="layui-btn" data-type="saveArticle" type="button" lay-submit >立即提交</button> 正确写法 <button class="layui-btn" lay-filter="saveArticle" type="button" lay-submit >立即提交</button> 点击提交事件监听 form.on('submit(sa..
关于required属性失效的问题
fly狮子座的博客
05-12 5249
最近在学习个人博客开发时遇到了required属性失效的问题的问题，不过经过在网上查询资料已经解决了。下面是一些解决方法。 1.仔细检查自己的代码是否有误 <!--正确写法--> <form action="#" method="post" class="ui form"> <!--错误写法--> <from action="#" method="post" class="ui form"> 我自己再写前端代码时将form属性误写成from，所以导致无法成功
HTML5 超链接：a标签的href 属性
云加速
01-02 1万+
H5中a标签的 href 属性用于指定超链接目标的 URL，这里主要给大家介绍一下 href 属性的定义和用法以及应用实例。 定义和用法： 标签的 href 属性用于指定超链接目标的 URL。 href 属性的值可以是任何有效文档的相对或绝对 URL，包括片段标识符和 JavaScript 代码段。如果用户选择了 标签中的内容，那么浏览器会尝试检索并显示 href 属性指定的
ajax提交form表单，H5的required属性没起作用
PlainWaterh的博客
02-24 1万+
1、 ajax提交form表单，required属性不起作用 错误代码如下<form id="order"> <input type="text" name="name" required /> <input type="submit" id="submit" /> </form><script> $("#submit").bind("click",function(){
ajax 按钮提交数据,fastadmin如何取消自带button提交，使用ajax提交数据。
最新发布
05-30
在FastAdmin中，取消自带的按钮提交，使用ajax提交数据，可以使用以下步骤： 1. 在模板文件中，找到需要替换的按钮，比如一个提交表单的按钮，一般是一个`<button>`标签或者一个`<input>`标签。 2. 将这个按钮的`type`属性设置为`button`，这样就可以禁止它默认的提交行为。 3. 给这个按钮绑定一个`click`事件，这个事件中使用ajax来提交数据。可以使用jQuery的`$.ajax()`方法来发送请求，也可以使用`$.post()`或`$.get()`方法。 下面是一个示例代码： ```html <button type="button" id="submitBtn">提交</button> <script> $(function(){ $('#submitBtn').click(function(){ $.ajax({ url: '/your/api/url', type: 'POST', data: $('#your-form').serialize(), success: function(res){ // 处理返回的数据 }, error: function(xhr, status, error){ // 处理错误 } }); }); }); </script> ``` 在这个示例中，我们将`<button>`标签的`type`属性设置为`button`，并且给它绑定了一个`click`事件，事件中使用`$.ajax()`方法来发送请求。需要注意的是，`$.ajax()`方法中的`url`参数是你的API地址，`data`参数是要提交的数据，可以使用`$('#your-form').serialize()`方法来序列化表单数据。`success`和`error`参数分别是请求成功和失败的回调函数，你可以在这里处理返回的数据或者错误信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值