Commit aa14aa54 by Samuel Padgett

Add `novalidate` to create project form

This prevents native browser hints like "Please fill out this field" from
popping up. The form is still validated using Angular form validation.

This also adds the message "Name is required" if you tab through the
name field without entering a value.
parent 336f3f39
...@@ -12,7 +12,7 @@ hawtioPluginLoader.addModule('openshiftCommonUI'); ...@@ -12,7 +12,7 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
'use strict'; 'use strict';
$templateCache.put('src/components/create-project/createProject.html', $templateCache.put('src/components/create-project/createProject.html',
"<form name=\"createProjectForm\">\n" + "<form name=\"createProjectForm\" novalidate>\n" +
" <fieldset ng-disabled=\"disableInputs\">\n" + " <fieldset ng-disabled=\"disableInputs\">\n" +
" <div class=\"form-group\">\n" + " <div class=\"form-group\">\n" +
" <label for=\"name\" class=\"required\">Name</label>\n" + " <label for=\"name\" class=\"required\">Name</label>\n" +
...@@ -39,6 +39,11 @@ hawtioPluginLoader.addModule('openshiftCommonUI'); ...@@ -39,6 +39,11 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
" <span class=\"help-block\">A unique name for the project.</span>\n" + " <span class=\"help-block\">A unique name for the project.</span>\n" +
" </div>\n" + " </div>\n" +
" <div class=\"has-error\">\n" + " <div class=\"has-error\">\n" +
" <span id=\"nameHelp\" class=\"help-block\" ng-if=\"createProjectForm.name.$error.required && createProjectForm.name.$touched\">\n" +
" Name is required.\n" +
" </span>\n" +
" </div>\n" +
" <div class=\"has-error\">\n" +
" <span id=\"nameHelp\" class=\"help-block\" ng-if=\"createProjectForm.name.$error.minlength && createProjectForm.name.$touched\">\n" + " <span id=\"nameHelp\" class=\"help-block\" ng-if=\"createProjectForm.name.$error.minlength && createProjectForm.name.$touched\">\n" +
" Name must have at least two characters.\n" + " Name must have at least two characters.\n" +
" </span>\n" + " </span>\n" +
......
...@@ -182,7 +182,7 @@ hawtioPluginLoader.addModule('openshiftCommonUI'); ...@@ -182,7 +182,7 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
'use strict'; 'use strict';
$templateCache.put('src/components/create-project/createProject.html', $templateCache.put('src/components/create-project/createProject.html',
"<form name=\"createProjectForm\">\n" + "<form name=\"createProjectForm\" novalidate>\n" +
" <fieldset ng-disabled=\"disableInputs\">\n" + " <fieldset ng-disabled=\"disableInputs\">\n" +
" <div class=\"form-group\">\n" + " <div class=\"form-group\">\n" +
" <label for=\"name\" class=\"required\">Name</label>\n" + " <label for=\"name\" class=\"required\">Name</label>\n" +
...@@ -209,6 +209,11 @@ hawtioPluginLoader.addModule('openshiftCommonUI'); ...@@ -209,6 +209,11 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
" <span class=\"help-block\">A unique name for the project.</span>\n" + " <span class=\"help-block\">A unique name for the project.</span>\n" +
" </div>\n" + " </div>\n" +
" <div class=\"has-error\">\n" + " <div class=\"has-error\">\n" +
" <span id=\"nameHelp\" class=\"help-block\" ng-if=\"createProjectForm.name.$error.required && createProjectForm.name.$touched\">\n" +
" Name is required.\n" +
" </span>\n" +
" </div>\n" +
" <div class=\"has-error\">\n" +
" <span id=\"nameHelp\" class=\"help-block\" ng-if=\"createProjectForm.name.$error.minlength && createProjectForm.name.$touched\">\n" + " <span id=\"nameHelp\" class=\"help-block\" ng-if=\"createProjectForm.name.$error.minlength && createProjectForm.name.$touched\">\n" +
" Name must have at least two characters.\n" + " Name must have at least two characters.\n" +
" </span>\n" + " </span>\n" +
......
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -2,7 +2,7 @@ angular.module('openshiftCommonUI').run(['$templateCache', function($templateCac ...@@ -2,7 +2,7 @@ angular.module('openshiftCommonUI').run(['$templateCache', function($templateCac
'use strict'; 'use strict';
$templateCache.put('src/components/create-project/createProject.html', $templateCache.put('src/components/create-project/createProject.html',
"<form name=\"createProjectForm\">\n" + "<form name=\"createProjectForm\" novalidate>\n" +
" <fieldset ng-disabled=\"disableInputs\">\n" + " <fieldset ng-disabled=\"disableInputs\">\n" +
" <div class=\"form-group\">\n" + " <div class=\"form-group\">\n" +
" <label for=\"name\" class=\"required\">Name</label>\n" + " <label for=\"name\" class=\"required\">Name</label>\n" +
...@@ -29,6 +29,11 @@ angular.module('openshiftCommonUI').run(['$templateCache', function($templateCac ...@@ -29,6 +29,11 @@ angular.module('openshiftCommonUI').run(['$templateCache', function($templateCac
" <span class=\"help-block\">A unique name for the project.</span>\n" + " <span class=\"help-block\">A unique name for the project.</span>\n" +
" </div>\n" + " </div>\n" +
" <div class=\"has-error\">\n" + " <div class=\"has-error\">\n" +
" <span id=\"nameHelp\" class=\"help-block\" ng-if=\"createProjectForm.name.$error.required && createProjectForm.name.$touched\">\n" +
" Name is required.\n" +
" </span>\n" +
" </div>\n" +
" <div class=\"has-error\">\n" +
" <span id=\"nameHelp\" class=\"help-block\" ng-if=\"createProjectForm.name.$error.minlength && createProjectForm.name.$touched\">\n" + " <span id=\"nameHelp\" class=\"help-block\" ng-if=\"createProjectForm.name.$error.minlength && createProjectForm.name.$touched\">\n" +
" Name must have at least two characters.\n" + " Name must have at least two characters.\n" +
" </span>\n" + " </span>\n" +
......
<form name="createProjectForm"> <form name="createProjectForm" novalidate>
<fieldset ng-disabled="disableInputs"> <fieldset ng-disabled="disableInputs">
<div class="form-group"> <div class="form-group">
<label for="name" class="required">Name</label> <label for="name" class="required">Name</label>
...@@ -25,6 +25,11 @@ ...@@ -25,6 +25,11 @@
<span class="help-block">A unique name for the project.</span> <span class="help-block">A unique name for the project.</span>
</div> </div>
<div class="has-error"> <div class="has-error">
<span id="nameHelp" class="help-block" ng-if="createProjectForm.name.$error.required && createProjectForm.name.$touched">
Name is required.
</span>
</div>
<div class="has-error">
<span id="nameHelp" class="help-block" ng-if="createProjectForm.name.$error.minlength && createProjectForm.name.$touched"> <span id="nameHelp" class="help-block" ng-if="createProjectForm.name.$error.minlength && createProjectForm.name.$touched">
Name must have at least two characters. Name must have at least two characters.
</span> </span>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment