{"action":"created","issue":{"url":"https://api.github.com/repos/Semantic-Org/Semantic-UI/issues/2120","repository_url":"https://api.github.com/repos/Semantic-Org/Semantic-UI","labels_url":"https://api.github.com/repos/Semantic-Org/Semantic-UI/issues/2120/labels{/name}","comments_url":"https://api.github.com/repos/Semantic-Org/Semantic-UI/issues/2120/comments","events_url":"https://api.github.com/repos/Semantic-Org/Semantic-UI/issues/2120/events","html_url":"https://github.com/Semantic-Org/Semantic-UI/issues/2120","id":68657055,"number":2120,"title":"Form validation cancels React.js onSubmit","user":{"login":"ticup","id":962776,"avatar_url":"https://avatars.githubusercontent.com/u/962776?v=3","gravatar_id":"","url":"https://api.github.com/users/ticup","html_url":"https://github.com/ticup","followers_url":"https://api.github.com/users/ticup/followers","following_url":"https://api.github.com/users/ticup/following{/other_user}","gists_url":"https://api.github.com/users/ticup/gists{/gist_id}","starred_url":"https://api.github.com/users/ticup/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ticup/subscriptions","organizations_url":"https://api.github.com/users/ticup/orgs","repos_url":"https://api.github.com/users/ticup/repos","events_url":"https://api.github.com/users/ticup/events{/privacy}","received_events_url":"https://api.github.com/users/ticup/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/Semantic-Org/Semantic-UI/labels/Evaluating%20Bug%20/%20Change","name":"Evaluating Bug / Change","color":"f7c6c7"}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2015-04-15T11:39:20Z","updated_at":"2016-09-12T10:14:00Z","closed_at":null,"body":"Hi,\r\n\r\nWhen I use form validation on my form, it doesn't trigger the React.js onSubmit anymore.\r\nMy guess is that in general, more semantic ui js events might cancel the React.js events.\r\n\r\nHere is a small test case. If you remove the form validation, you'll see it does trigger the onSubmit, but it doesn't with the validation: https://jsfiddle.net/zza2furx/7/\r\n\r\n````\r\nvar FormBox = React.createClass({\r\n  handleSubmit: function (e) {\r\n      e.preventDefault();\r\n      alert('it works');\r\n  },\r\n  componentDidMount: function () {\r\n      $('form').form({\r\n      foo: {\r\n                    identifier  : 'foo',\r\n                    rules: [\r\n                        {\r\n                            type   : 'empty',\r\n                            prompt : 'Please enter your foo'\r\n                        }\r\n                    ]\r\n                },\r\n      },\r\n      {inline: true,\r\n      on: 'blur'});\r\n  },\r\n  render: function() {\r\n    var user = this.props.data;\r\n    return (\r\n   <form className=\"ui form\" onSubmit={this.handleSubmit}>\r\n   <input name=\"foo\" type=\"text\" placeholder=\"enter text\"/>\r\n   <button className=\"ui primary submit button\"> submit</button>\r\n   </form>\r\n    );\r\n  }\r\n\r\n}); \r\nReact.render(<FormBox />, document.body);\r\n````\r\n\r\nNot sure if this is React.js' fault or semantic's, but my guess it's on semantic's side and the way that they trigger the submit of the form?\r\n\r\nThanks\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/Semantic-Org/Semantic-UI/issues/comments/246305606","html_url":"https://github.com/Semantic-Org/Semantic-UI/issues/2120#issuecomment-246305606","issue_url":"https://api.github.com/repos/Semantic-Org/Semantic-UI/issues/2120","id":246305606,"user":{"login":"SimonXianyu","id":5753526,"avatar_url":"https://avatars.githubusercontent.com/u/5753526?v=3","gravatar_id":"","url":"https://api.github.com/users/SimonXianyu","html_url":"https://github.com/SimonXianyu","followers_url":"https://api.github.com/users/SimonXianyu/followers","following_url":"https://api.github.com/users/SimonXianyu/following{/other_user}","gists_url":"https://api.github.com/users/SimonXianyu/gists{/gist_id}","starred_url":"https://api.github.com/users/SimonXianyu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/SimonXianyu/subscriptions","organizations_url":"https://api.github.com/users/SimonXianyu/orgs","repos_url":"https://api.github.com/users/SimonXianyu/repos","events_url":"https://api.github.com/users/SimonXianyu/events{/privacy}","received_events_url":"https://api.github.com/users/SimonXianyu/received_events","type":"User","site_admin":false},"created_at":"2016-09-12T10:14:00Z","updated_at":"2016-09-12T10:14:00Z","body":"It seems that event's method preventDefault()   can be used to cancel event.\r\n\r\nexample:\r\n handleSubmit: function(e) {\r\n    if (!$('#loginForm').valid()) {\r\n      e.preventDefault();\r\n    }\r\n  }"}}
{"actor":{"display_login":"SimonXianyu"}}