PageRenderTime 39ms CodeModel.GetById 11ms RepoModel.GetById 0ms app.codeStats 1ms

/src/app/pages/forms/bootstrap-validation/AttributeForm.jsx

https://gitlab.com/blockbuster/react-router-2-with-browserHistory-not-working-public
JSX | 159 lines | 145 code | 14 blank | 0 comment | 0 complexity | 3adf478194b73a44a5c1cc372aeeceab MD5 | raw file
  1. import React from 'react'
  2. import BootstrapValidator from '../../../../components/forms/validation/BootstrapValidator.jsx'
  3. let AttributeForm = React.createClass({
  4. _onSubmit: function (e) {
  5. e.preventDefault();
  6. console.log('submit stuff')
  7. },
  8. render: function () {
  9. return (
  10. <BootstrapValidator>
  11. <form id="attributeForm" onSubmit={this._onSubmit} className="form-horizontal"
  12. data-bv-message="This value is not valid"
  13. data-bv-feedbackicons-valid="glyphicon glyphicon-ok"
  14. data-bv-feedbackicons-invalid="glyphicon glyphicon-remove"
  15. data-bv-feedbackicons-validating="glyphicon glyphicon-refresh">
  16. <fieldset>
  17. <legend>
  18. Set validator options via HTML attributes
  19. </legend>
  20. <div className="alert alert-warning">
  21. <code>&lt; input
  22. data-bv-validatorname
  23. data-bv-validatorname-validatoroption="..." / &gt;</code>
  24. <br/>
  25. <br/>
  26. More validator options can be found here:
  27. <a href="http://bootstrapvalidator.com/validators/" target="_blank">http://bootstrapvalidator.com/validators/</a>
  28. </div>
  29. <div className="form-group">
  30. <label className="col-lg-3 control-label">Full name</label>
  31. <div className="col-lg-4">
  32. <input type="text" className="form-control" name="firstName" placeholder="First name"
  33. data-bv-notempty="true"
  34. data-bv-notempty-message="The first name is required and cannot be empty"/>
  35. </div>
  36. <div className="col-lg-4">
  37. <input type="text" className="form-control" name="lastName" placeholder="Last name"
  38. data-bv-notempty="true"
  39. data-bv-notempty-message="The last name is required and cannot be empty"/>
  40. </div>
  41. </div>
  42. </fieldset>
  43. <fieldset>
  44. <div className="form-group">
  45. <label className="col-lg-3 control-label">Username</label>
  46. <div className="col-lg-5">
  47. <input type="text" className="form-control" name="username"
  48. data-bv-message="The username is not valid" data-bv-notempty="true"
  49. data-bv-notempty-message="The username is required and cannot be empty"
  50. data-bv-regexp="true" data-bv-regexp-regexp="^[a-zA-Z0-9_\.]+$"
  51. data-bv-regexp-message="The username can only consist of alphabetical, number, dot and underscore"
  52. data-bv-stringlength="true" data-bv-stringlength-min="6"
  53. data-bv-stringlength-max="30"
  54. data-bv-stringlength-message="The username must be more than 6 and less than 30 characters long"
  55. data-bv-different="true" data-bv-different-field="password"
  56. data-bv-different-message="The username and password cannot be the same as each other"/>
  57. </div>
  58. </div>
  59. </fieldset>
  60. <fieldset>
  61. <div className="form-group">
  62. <label className="col-lg-3 control-label">Email address</label>
  63. <div className="col-lg-5">
  64. <input className="form-control" name="email" type="email" data-bv-emailaddress="true"
  65. data-bv-emailaddress-message="The input is not a valid email address"/>
  66. </div>
  67. </div>
  68. </fieldset>
  69. <fieldset>
  70. <div className="form-group">
  71. <label className="col-lg-3 control-label">Password</label>
  72. <div className="col-lg-5">
  73. <input type="password" className="form-control" name="password" data-bv-notempty="true"
  74. data-bv-notempty-message="The password is required and cannot be empty"
  75. data-bv-identical="true" data-bv-identical-field="confirmPassword"
  76. data-bv-identical-message="The password and its confirm are not the same"
  77. data-bv-different="true" data-bv-different-field="username"
  78. data-bv-different-message="The password cannot be the same as username"/>
  79. </div>
  80. </div>
  81. </fieldset>
  82. <fieldset>
  83. <div className="form-group">
  84. <label className="col-lg-3 control-label">Retype password</label>
  85. <div className="col-lg-5">
  86. <input type="password" className="form-control" name="confirmPassword"
  87. data-bv-notempty="true"
  88. data-bv-notempty-message="The confirm password is required and cannot be empty"
  89. data-bv-identical="true" data-bv-identical-field="password"
  90. data-bv-identical-message="The password and its confirm are not the same"
  91. data-bv-different="true" data-bv-different-field="username"
  92. data-bv-different-message="The password cannot be the same as username"/>
  93. </div>
  94. </div>
  95. </fieldset>
  96. <fieldset>
  97. <div className="form-group">
  98. <label className="col-lg-3 control-label">Languages</label>
  99. <div className="col-lg-5">
  100. <div className="checkbox">
  101. <label>
  102. <input type="checkbox" name="languages[]" value="english"
  103. data-bv-message="Please specify at least one language you can speak"
  104. data-bv-notempty="true"/>
  105. English </label>
  106. </div>
  107. <div className="checkbox">
  108. <label>
  109. <input type="checkbox" name="languages[]" value="french"/>
  110. French </label>
  111. </div>
  112. <div className="checkbox">
  113. <label>
  114. <input type="checkbox" name="languages[]" value="german"/>
  115. German </label>
  116. </div>
  117. <div className="checkbox">
  118. <label>
  119. <input type="checkbox" name="languages[]" value="russian"/>
  120. Russian </label>
  121. </div>
  122. <div className="checkbox">
  123. <label>
  124. <input type="checkbox" name="languages[]" value="other"/>
  125. Other </label>
  126. </div>
  127. </div>
  128. </div>
  129. </fieldset>
  130. <div className="form-actions">
  131. <div className="row">
  132. <div className="col-md-12">
  133. <button className="btn btn-default" type="submit">
  134. <i className="fa fa-eye"/>
  135. Validate
  136. </button>
  137. </div>
  138. </div>
  139. </div>
  140. </form>
  141. </BootstrapValidator>
  142. )
  143. }
  144. });
  145. export default AttributeForm