improved validation

filestorage/static/css/filestorage.css

@@ -1,16 +1,16 @@
 /* CSS for FileStorageXBlock */
 
-.filestorage_block p {
+.filestorage-xblock p {
     cursor: pointer;
 }
 
-.tip {
+.filestorage-xblock .tip {
     float: right;
     min-width: 20% !important;
     width: 25%;
 }
 
-.filestorage_block_wrapper iframe{
+.filestorage-xblock .wrapper iframe{
     width: 100%;
     min-height: 569px;
     display: block;
@@ -18,13 +18,27 @@
     border: 1px solid #cccccc;
 }
 
-.filestorage_block_wrapper iframe.no-width-height{
+.filestorage-xblock .wrapper iframe.no-width-height{
     top: 0;
     left: 0;
 }
 
-.filestorage_message {
+.filestorage-xblock .message {
     width: 100%;
     margin: 5px 0px 0px 0px;
     font-size: 12px;
 }
+
+.filestorage-xblock .error-message {
+    color: red;
+    display: none;
+    margin: 0px 0px 10px 0px;
+}
+
+.filestorage-xblock .visible {
+    display: block;
+}
+    
+.filestorage-xblock .error {
+    border: 1px solid red !important;
+}

filestorage/static/html/filestorage.html

@@ -1,9 +1,9 @@
-<div class="filestorage_block" id="filestorage_block_container">
+<div class="filestorage-xblock" id="filestorage_block_container">
 
-    <div class="filestorage_block_wrapper">
+    <div class="wrapper">
         {self.output_code}
     </div>
-    <div class="filestorage_message" style="display: {self.message_display_state}">
+    <div class="message" style="display: {self.message_display_state}">
         {self.message}
     </div>
 

filestorage/static/html/filestorage_edit.html

@@ -1,4 +1,4 @@
-<div class="wrapper-comp-settings is-active editor-with-buttons filestorage_block" id="settings-tab">
+<div class="wrapper-comp-settings is-active editor-with-buttons filestorage-xblock" id="settings-tab">
 
     <ul class="list-input settings-list">
         <li class="field comp-setting-entry is-set">
@@ -28,7 +28,9 @@
     </ul>
 
     <div class="xblock-actions">
-        <span class="xblock-editor-error-message"></span>
+        <span class="xblock-editor-error-message">
+            <span class="error-message">Please enter valid values into the highlighted fields above.</span>
+        </span>
         <ul>
             <li class="action-item">
                 <a href="#" class="save-button action-primary action">Save</a>

filestorage/static/js/src/filestorage_edit.js

@@ -1,37 +1,49 @@
 /* Javascript for FileStorageXBlock. */
 function FileStorageXBlock(runtime, element) {
 
+  var display_name = $(element).find('input[name=edit_display_name]');
+  var document_url = $(element).find('input[name=edit_document_url]');
+  var model = $(element).find('select[name=model]');
+  var reference_name = $(element).find('input[name=edit_reference_name]');
+  var error_message = $(element).find('.filestorage-xblock .error-message');
+
   $(element).find('.save-button').bind('click', function() {
-    var display_name = $(element).find('input[name=edit_display_name]').val().trim();
-    var document_url = $(element).find('input[name=edit_document_url]').val().trim();
-    var model = $(element).find('select[name=model]').val();
-    var reference_text = $(element).find('input[name=edit_reference_name]').val().trim();
+    var display_name_val = display_name.val().trim();
+    var document_url_val = document_url.val().trim();
+    var model_val = model.val();
+    var reference_name_val = reference_name.val().trim();
 
-    if (!display_name) {
-      alert("Please enter the title for this component.");
+    clearErrors();
+    
+    if (!display_name_val) {
+      display_name.addClass('error');
+      error_message.addClass('visible');
       return;
     }
 
-    if (!document_url) {
-      alert("Please enter the document URL.");
+    if (!document_url_val || (!isValidUrl(document_url_val) && !isValidEmbedCode(document_url_val))) {
+      document_url.addClass('error');
+      error_message.addClass('visible');
       return;
     }
 
-    if ((model != 1) && /<iframe /i.test(document_url)) {
-        alert("You have entered an embed code as the document URL. You need to either choose to embed the document or enter a URL for the document.");
-        return;
+    if ((model_val != 1) && isValidEmbedCode(document_url_val)) {
+      document_url.addClass('error');
+      error_message.addClass('visible');
+      return;
     }
 
-    if ((model == 2) && !reference_text) {
-      alert("Please enter the text to use for the reference.");
+    if ((model_val == 2) && !reference_name_val) {
+      reference_name.addClass('error');
+      error_message.addClass('visible');
       return;
     }
     
     var data = {
-      display_name: display_name,
-      reference_name: reference_text,
-      document_url: document_url,
-      model: model
+      display_name: display_name_val,
+      reference_name: reference_name_val,
+      document_url: document_url_val,
+      model: model_val
     };
 
     var handlerUrl = runtime.handlerUrl(element, 'studio_submit');
@@ -41,17 +53,46 @@ function FileStorageXBlock(runtime, element) {
     });
   });
 
+  display_name.bind('keyup', function(){
+    clearErrors();
+  });
+
+  document_url.bind('keyup', function(){
+    clearErrors();
+  });
+
+  reference_name.bind('keyup', function(){
+    clearErrors();
+  });
+
   $('.cancel-button', element).bind('click', function() {
     runtime.notify('cancel', {});
   });
 
   $('#output_models').bind('change', function() {
+    clearErrors();
     if ($("#output_models" ).val() == 2){
       $("#add_reference_name").show();
     } else {
       $("#add_reference_name").hide();  
     }
   });
+  
+  function clearErrors() {
+    display_name.removeClass('error');
+    document_url.removeClass('error');
+    reference_name.removeClass('error');
+    error_message.removeClass('visible');
+  }
+  
+  function isValidUrl(url) {
+    return /^(https?):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(url);
+  }
+  
+  function isValidEmbedCode(code) {
+    return /<iframe /i.test(code);
+  }
+  
 
   $(function ($) {
     /* Here's where you'd do things on page load. */