added validation to form

Deepak
1 parent ff976df496
Showing 3 changed files with 38 additions and 13 deletions Show diff stats
imports/collections/orgs/publications.js
imports/modules/signup.js
imports/ui/pages/Signup.js
@@ -12,6 +12,5 @@ Meteor.publish(&#39;orgs.current&#39;, function () {
 });
  
 Meteor.publish('allOrgsSlug', function () {
-  console.log(Orgs.find({},{fields: Orgs.publicFields}).fetch());
   return Orgs.find({},{fields: Orgs.publicFields});
 });
@@ -5,6 +5,7 @@ import { Accounts }                       from &#39;meteor/accounts-base&#39;;
 import { Bert }                           from 'meteor/themeteorchef:bert';
 import { Loading }                        from '/imports/client/components/Loading';
 import                                         './validation.js';
+import { Orgs }                           from '/imports/collections/orgs/index';
  
 let component;
  
@@ -31,10 +32,26 @@ const signup = () =&gt; {
     }
   });
 };
-
+$.validator.addMethod(
+    "uniqueSlug",
+    function(value, element) {
+      slug = Orgs.find({slug:value}).fetch();
+      console.log(slug);
+      if(slug.length>0){
+        return false;
+      }else{
+        return true
+      }
+    },
+    "Name is Already Taken"
+);
 const validate = () => {
   $(component.signupForm).validate({
     rules: {
+      orgSlug: {
+        required: true,
+        uniqueSlug: true
+      },
       firstName: {
         required: true,
       },
@@ -53,6 +70,7 @@ const validate = () =&gt; {
     messages: {
       firstName: {
         required: 'First name?',
+        uniqueSlug: "This Name is already taken"
       },
       lastName: {
         required: 'Last name?',
@@ -10,7 +10,7 @@ export default class Signup extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      newSlug: ""
+      orgSlug: ""
     };
   }
   componentWillMount(){
@@ -20,13 +20,21 @@ export default class Signup extends React.Component {
   componentDidMount() {
     handleSignup({ component: this });
   }
-
+  handleChange(e) {
+     this.setState({ orgSlug: e.target.value });
+   }
   handleSubmit(event) {
     event.preventDefault();
   }
-  checkExistingOrgSlug(e) {
-    searchOrg = Orgs.find({}).fetch();
-    console.log(searchOrg);
+  checkExistingOrgSlug() {
+    console.log(this.state.orgSlug);
+    if(this.state.orgSlug==""){return null}
+    searchOrg = Orgs.find({slug:this.state.orgSlug}).fetch();
+    if(searchOrg.length>0){
+      return "error"
+    }else{
+      return "success"
+    }
   }
   render() {
     return (
@@ -40,15 +48,15 @@ export default class Signup extends React.Component {
             >
             <Row>
             <Col xs={ 12 } sm={ 12 }>
-              <FormGroup controlId="formValidationError2">
+              <FormGroup controlId="orgSlugField" validationState={this.checkExistingOrgSlug()}>
                 <ControlLabel>Organisation name</ControlLabel>
                 <InputGroup>
                   <FormControl
-                    type="text"
-                    ref="orgSlug"
-                    name="orgSlug"
-                    placeholder="School Name"
-                    onChange    = {(e) => this.checkExistingOrgSlug(e)}
+                    type        ="text"
+                    ref         ="orgSlug"
+                    name        ="orgSlug"
+                    placeholder ="School Name"
+                    onChange    = {(e) => this.handleChange(e)}
                   />
                   <InputGroup.Addon>@yd.com</InputGroup.Addon>
                 </InputGroup>
...	...	@@ -12,6 +12,5 @@ Meteor.publish('orgs.current', function () {
12	12	});
13	13
14	14	Meteor.publish('allOrgsSlug', function () {
15		- console.log(Orgs.find({},{fields: Orgs.publicFields}).fetch());
16	15	return Orgs.find({},{fields: Orgs.publicFields});
17	16	});
...	...
...	...	@@ -5,6 +5,7 @@ import { Accounts } from 'meteor/accounts-base';
5	5	import { Bert } from 'meteor/themeteorchef:bert';
6	6	import { Loading } from '/imports/client/components/Loading';
7	7	import './validation.js';
	8	+import { Orgs } from '/imports/collections/orgs/index';
8	9
9	10	let component;
10	11
...	...	@@ -31,10 +32,26 @@ const signup = () => {
31	32	}
32	33	});
33	34	};
34		-
	35	+$.validator.addMethod(
	36	+ "uniqueSlug",
	37	+ function(value, element) {
	38	+ slug = Orgs.find({slug:value}).fetch();
	39	+ console.log(slug);
	40	+ if(slug.length>0){
	41	+ return false;
	42	+ }else{
	43	+ return true
	44	+ }
	45	+ },
	46	+ "Name is Already Taken"
	47	+);
35	48	const validate = () => {
36	49	$(component.signupForm).validate({
37	50	rules: {
	51	+ orgSlug: {
	52	+ required: true,
	53	+ uniqueSlug: true
	54	+ },
38	55	firstName: {
39	56	required: true,
40	57	},
...	...	@@ -53,6 +70,7 @@ const validate = () => {
53	70	messages: {
54	71	firstName: {
55	72	required: 'First name?',
	73	+ uniqueSlug: "This Name is already taken"
56	74	},
57	75	lastName: {
58	76	required: 'Last name?',
...	...
...	...	@@ -10,7 +10,7 @@ export default class Signup extends React.Component {
10	10	constructor(props) {
11	11	super(props);
12	12	this.state = {
13		- newSlug: ""
	13	+ orgSlug: ""
14	14	};
15	15	}
16	16	componentWillMount(){
...	...	@@ -20,13 +20,21 @@ export default class Signup extends React.Component {
20	20	componentDidMount() {
21	21	handleSignup({ component: this });
22	22	}
23		-
	23	+ handleChange(e) {
	24	+ this.setState({ orgSlug: e.target.value });
	25	+ }
24	26	handleSubmit(event) {
25	27	event.preventDefault();
26	28	}
27		- checkExistingOrgSlug(e) {
28		- searchOrg = Orgs.find({}).fetch();
29		- console.log(searchOrg);
	29	+ checkExistingOrgSlug() {
	30	+ console.log(this.state.orgSlug);
	31	+ if(this.state.orgSlug==""){return null}
	32	+ searchOrg = Orgs.find({slug:this.state.orgSlug}).fetch();
	33	+ if(searchOrg.length>0){
	34	+ return "error"
	35	+ }else{
	36	+ return "success"
	37	+ }
30	38	}
31	39	render() {
32	40	return (
...	...	@@ -40,15 +48,15 @@ export default class Signup extends React.Component {
40	48	>
41	49	<Row>
42	50	<Col xs={ 12 } sm={ 12 }>
43		- <FormGroup controlId="formValidationError2">
	51	+ <FormGroup controlId="orgSlugField" validationState={this.checkExistingOrgSlug()}>
44	52	<ControlLabel>Organisation name</ControlLabel>
45	53	<InputGroup>
46	54	<FormControl
47		- type="text"
48		- ref="orgSlug"
49		- name="orgSlug"
50		- placeholder="School Name"
51		- onChange = {(e) => this.checkExistingOrgSlug(e)}
	55	+ type ="text"
	56	+ ref ="orgSlug"
	57	+ name ="orgSlug"
	58	+ placeholder ="School Name"
	59	+ onChange = {(e) => this.handleChange(e)}
52	60	/>
53	61	<InputGroup.Addon>@yd.com</InputGroup.Addon>
54	62	</InputGroup>
...	...