{"action":"created","issue":{"url":"https://api.github.com/repos/themeteorchef/getting-started-with-react/issues/6","labels_url":"https://api.github.com/repos/themeteorchef/getting-started-with-react/issues/6/labels{/name}","comments_url":"https://api.github.com/repos/themeteorchef/getting-started-with-react/issues/6/comments","events_url":"https://api.github.com/repos/themeteorchef/getting-started-with-react/issues/6/events","html_url":"https://github.com/themeteorchef/getting-started-with-react/issues/6","id":120617103,"number":6,"title":"Validation on login","user":{"login":"mtwallet","id":1025398,"avatar_url":"https://avatars.githubusercontent.com/u/1025398?v=3","gravatar_id":"","url":"https://api.github.com/users/mtwallet","html_url":"https://github.com/mtwallet","followers_url":"https://api.github.com/users/mtwallet/followers","following_url":"https://api.github.com/users/mtwallet/following{/other_user}","gists_url":"https://api.github.com/users/mtwallet/gists{/gist_id}","starred_url":"https://api.github.com/users/mtwallet/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mtwallet/subscriptions","organizations_url":"https://api.github.com/users/mtwallet/orgs","repos_url":"https://api.github.com/users/mtwallet/repos","events_url":"https://api.github.com/users/mtwallet/events{/privacy}","received_events_url":"https://api.github.com/users/mtwallet/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2015-12-06T08:01:21Z","updated_at":"2015-12-08T22:30:11Z","closed_at":null,"body":"Hi,\r\n\r\nI would like to show validation messages on the form fields directly rather than using Bert if the username cannot be found or the password is incorrect. I have the following code, which works perfectly, but I would like to know if this the best/correct way or if I can use the jQuery validate plugin instead.\r\n\r\n    Meteor.loginWithPassword( email, password, ( error ) => {\r\n      if ( error ) {\r\n        if(error.reason === 'Incorrect password') {\r\n          $('input[name=\"password\"]').attr('class', 'error');\r\n          $('<label class=\"error\">' + error.reason + '</label>').appendTo('label[for=\"password\"]');\r\n        }\r\n\r\n        if(error.reason === 'User not found') {\r\n          $('input[name=\"emailAddress\"]').attr('class', 'error');\r\n          $('<label class=\"error\">' + error.reason + '</label>').appendTo('label[for=\"emailAddress\"]');\r\n        }\r\n\r\n      } else {\r\n        Bert.alert( 'Logged in!', 'success' );\r\n      }\r\n    });\r\n\r\nMany thanks."},"comment":{"url":"https://api.github.com/repos/themeteorchef/getting-started-with-react/issues/comments/163039566","html_url":"https://github.com/themeteorchef/getting-started-with-react/issues/6#issuecomment-163039566","issue_url":"https://api.github.com/repos/themeteorchef/getting-started-with-react/issues/6","id":163039566,"user":{"login":"themeteorchef","id":8183166,"avatar_url":"https://avatars.githubusercontent.com/u/8183166?v=3","gravatar_id":"","url":"https://api.github.com/users/themeteorchef","html_url":"https://github.com/themeteorchef","followers_url":"https://api.github.com/users/themeteorchef/followers","following_url":"https://api.github.com/users/themeteorchef/following{/other_user}","gists_url":"https://api.github.com/users/themeteorchef/gists{/gist_id}","starred_url":"https://api.github.com/users/themeteorchef/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/themeteorchef/subscriptions","organizations_url":"https://api.github.com/users/themeteorchef/orgs","repos_url":"https://api.github.com/users/themeteorchef/repos","events_url":"https://api.github.com/users/themeteorchef/events{/privacy}","received_events_url":"https://api.github.com/users/themeteorchef/received_events","type":"User","site_admin":false},"created_at":"2015-12-08T22:30:11Z","updated_at":"2015-12-08T22:30:11Z","body":"It's anecdotal (no specific source of information) and my own understanding of why it's not okay is still fuzzy. I haven't found a straight answer as to what problems it causes which is why I've kept it in a lot of my code. My current understanding is that the following (using refs as opposed to straight DOM selectors) is preferred:\r\n\r\n```\r\nIndex = React.createClass({\r\n  componentDidMount() {\r\n    let refs = this.refs,\r\n        form = React.findDOMNode( refs.requestForm );\r\n\r\n    $( form ).validate({\r\n      rules: {\r\n        emailAddress: { required: true, email: true }\r\n      },\r\n      submitHandler() {\r\n        let email = React.findDOMNode( refs.emailAddress );\r\n\r\n        Meteor.call( 'addToInvitesList', email.value, ( error ) => {\r\n          if ( error ) {\r\n            alert( error.reason );\r\n          } else {\r\n            email.value = \"\";\r\n            alert( 'Invite requested. We\\'ll be in touch soon. Thanks for your interest in Urkelforce!' );\r\n          }\r\n        });\r\n      }\r\n    });\r\n  },\r\n  handleSubmit( event ) {\r\n    event.preventDefault();\r\n  },\r\n  render() {\r\n    return <div classNameName=\"index\">\r\n      [...]\r\n      <Form ref=\"requestForm\" id=\"request-beta-invite\" className=\"email-form\" onSubmit={ this.handleSubmit }>\r\n        <Input\r\n          ref=\"emailAddress\"\r\n          type=\"email\"\r\n          name=\"emailAddress\"\r\n          className=\"form-control\"\r\n          placeholder=\"e.g. beatrix@beta.com\"\r\n        />\r\n      <Button type=\"submit\" buttonStyle=\"success\" label=\"Request Beta Invite\" />\r\n      </Form>\r\n    </div>;\r\n  }\r\n});\r\n```\r\n\r\nThe problem is that all of the functionality for validation is tied up in this library which is using jQuery. However, an equivalent doesn't appear to exist for React, so it's a catch-22. Use React, but don't use jQuery libraries (and lose functionality), or, spend a lot of time trying to re-implement functionality in jQuery libraries. Again, this is my current understanding so there's bound to be some naivety in my understanding."}}