html5 中form 没有调用onsubmit方法

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html5 中form 没有调用onsubmit方法相关的知识,希望对你有一定的参考价值。

onsubmit 属性在提交form表单时触发,onsubmit 属性只在 <form> 中使用。

测试代码如下:

<!DOCTYPE html>
<html>
<head>
<script>
function checkForm()

alert("表单已提交!");

</script>
</head>
<body>

<form action="/demo/demo_form.asp" onsubmit="checkForm()">
姓:<input type="text" name="lname"><br>
名:<input type="text" name="fname"><br>
<input type="submit" value="提交">

<p>函数 checkForm() 在提交按钮被点击时触发。此函数向用户显示一段消息。</p>

</body>
</html>
参考技术A checkPhoneNum() 函数验证不通过时, 需要返回 false才能阻止表单的提交追问

setCustomValidity()函数为空代表验证通过,会返回true,不为空代表未通过,会返回false

追答

表单是否提交是根据checkPhoneNum() 的返回值决定的吧。

要不你改另外一种表单提交方式,不用表单的默认提交,而是checkPhoneNum() 通过验证了就:document.getElementById("myForm").submit();

使用来自 redux-forms "onSubmit" 的 dispatch 分离 API 调用

【中文标题】使用来自 redux-forms "onSubmit" 的 dispatch 分离 API 调用【英文标题】:Separate API calls using dispatch from redux-forms "onSubmit" 【发布时间】:2017-05-25 05:06:08 【问题描述】:

我按照文档的建议集成了 redux-form,一切正常。 下一步我想将异步 API 调用添加到我的应用程序中,并将它们与redux-form 创建的表单结合起来。

像往常一样,我想将我的 ui 组件与应用程序逻辑分开。 redux 这样做的方式是在组件中调度操作并在 reducer 中执行必要的逻辑。当您需要在您的操作/actionCreators 中进行异步操作时,可以使用 redux-thunk 或其他库,例如 redux-saga

假设我想使用 redux-thunk 在我的 actionCreators 中使用异步 api 调用来更新我的应用程序状态。现在的问题是,有人如何将它与redux-formonSubmit 函数中给我们的逻辑结合起来?此函数假定您返回一个处理表单状态的承诺,但我找不到将其与使用操作的通常方式相结合的方法。

redux-form 不是提供了一种使用操作来处理提交功能的简化方法吗?

如果有不清楚的地方,或者您需要一些代码来更清楚地了解我想要实现的目标,请随时提出任何问题。谢谢!

【问题讨论】:

【参考方案1】:

Redux-form 允许你传入一个提交处理程序属性,你可以在其他地方使用它。

一种可能的方法。

您的父组件

class FormHandler extends Component 
  constructor(props) 
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  
  handleSubmit(data) 
    return this.props.asyncAction(data).then(() => 
      throw new SubmissionError( user: 'Username already taken.', _error: 'Form submission failed' );
    
  
  render() 
    return <MyForm onSubmit=this.handleSubmit />
  


export default connect(mapStateToProps,  asyncAction )(FormHandler);

你可以连接你的父组件,就像你通常没有 redux-form 一样,handleSubmit 可以是一个连接到你的商店的动作。

您可以在 Redux form official documentation 上找到有关提交验证的更多信息。

你的 redux-form MyForm

class MyForm extends Component 
  render() 
    const  error, handleSubmit, onSubmit, submitting  = this.props;

    return (
      <form onSubmit=handleSubmit(onSubmit)>
          ... fields ...
          <button type="submit" disabled=submitting>Create</button>
      </form>
    );
  


MyForm.PropTypes = 
  onSubmit: PropTypes.func.isRequired
;

export default reduxForm(
  form: 'myForm',
)(MyForm);

【讨论】:

谢谢。这就是我现在正在做的方式。我对您将父组件的handleSubmit 函数与异步提交验证(您需要在handleSubmit 函数中返回一个promise)与使用副作用绑定到redux-store 的API 调用连接的方式感兴趣喜欢redux-thunkredux-thunk actionCreators 需要返回一个带有 dispatch 作为 props 的函数。 @choise 查看我的编辑。我添加了一个非常完整的父级示例,包括react-redux 连接和对官方文档验证的引用。如果您不使用react-redux,只需像往常一样发送操作,这不会改变。

以上是关于html5 中form 没有调用onsubmit方法的主要内容,如果未能解决你的问题,请参考以下文章

jsp中form表单中使用onsubmit调用function函数没有执行 请求大侠指导!!!!!!下面是具体代码

Form表单的action和onSubmit示例介绍

使用来自 redux-forms "onSubmit" 的 dispatch 分离 API 调用

使用onsubmit return false 阻止form表单提交的方法介绍

关于表单form元素中onsubmit事件处理机制的认识

ASP问题 onclick和onsubmit的区别 如题。