HTML / CSS表单：Jquery插件验证不起作用

Question

我尝试改进此答案upload file/google drive以便使用它。我或多或少地改变了设计。我现在正在尝试制作所需的值，并且在所有值都有效/存在之前无法提交表单

我使用谷歌脚本编辑器发布表单：我有3个文件：Code.gs; Form.html和Thnaks.html

我设法做了以下事情（Daemedeor的建议）

＆＃13;

＆＃13;

<script>
  // Javascript function called by "submit" button handler,
  // to show results.
  function updateOutput(resultHtml) {
    toggle_visibility('inProgress');
    var outputDiv = document.getElementById('output');
    outputDiv.innerHTML = resultHtml;
  }

  // From blog.movalog.com/a/javascript-toggle-visibility/
  function toggle_visibility(id) {
    var e = document.getElementById(id);
    if(e.style.display == 'block')
      e.style.display = 'none';
    else
      e.style.display = 'block';
  }
</script>

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
/**
  * Basic jQuery Validation Form Demo Code
  * Copyright Sam Deering 2012
  * Licence: http://www.jquery4u.com/license/
  */
(function($,W,D)
{
    var JQUERY4U = {};

    JQUERY4U.UTIL =
    {
        setupFormValidation: function()
        {
            //form validation rules
            $("#register-form").validate({
                rules: {
                    name: "required",
                    department: "required",
                    email: {
                        required: true,
                        email: true
                    },
                    
                },
                messages: {
                    name: "Please enter your name",
                    department: "Please choose your department",
                    
                    },
                    email: "Please enter a valid email address",
                },
                submitHandler: function(form) {
                    form.submit();
                }
            });
        }
    }

    //when the dom has loaded setup form validation rules
    $(D).ready(function($) {
        JQUERY4U.UTIL.setupFormValidation();
    });

})(jQuery, window, document);
</script>

＆＃13;

<link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'>
<style type="text/css">

img {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width:500px;
      height:170px;
     ;
}

form {
    width:450px;
    padding:30px;
    margin: auto;
    background: #FFF;
    border-radius: 10px;
    -webkit-border-radius:10px;
    -moz-border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
}

h1 {
    background: #2A88AD;
    padding: 20px 30px 15px 30px;
    margin: -30px -30px 30px -30px;
    border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
    font: normal 30px 'Bitter', serif;
    -moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
    -webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
    box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
    border: 1px solid #257C9E;
}

h1 > span {
    display: block;
    margin-top: 2px;
    font: 13px Arial, Helvetica, sans-serif;
}

label {
    display: block;
    font: 13px Arial, Helvetica, sans-serif;
    color: #888;
    margin-bottom: 15px;
}

input[type="text"],
input[type="email"],
input[type="file"],
textarea,
select {
    display: block;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    padding: 8px;
    outline: none;
    border: 1px solid #B0CFE0;
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
}

section{
    font: normal 20px 'Bitter', serif;
    color: #2A88AD;
    margin-bottom: 5px;
}

section span {
    background: #2A88AD;
    padding: 5px 10px 5px 10px;
    position: absolute;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border: 4px solid #fff;
    font-size: 14px;
    margin-left: -45px;
    color: #fff;
    margin-top: -3px;
}

input[type="button"], 
input[type="submit"]{
    background: #2A88AD;
    padding: 8px 20px 8px 20px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
    font: normal 30px 'Bitter', serif;
    -moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
    -webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
    box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
    border: 1px solid #257C9E;
    font-size: 15px;
}
input[type="button"]:hover, 
input[type="submit"]:hover{
    background: #2A6881;
    -moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
    -webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
    box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
}


</style>

＆＃13;

<div id="formDiv">
<!-- Form div will be hidden after form submission -->
<form id="myForm" runat="server">
<h1>Job Application<span>Apply now and get the opportunity to join us!</span></h1>
<section> <span>1</span>Personal details</section>
    Name: <input type="text" name="name"/><br/>
    <section> <span>2</span>Your experience</section>
    Department:  <select name="department">
    <option>Math</option>
    <option>English</option>
    <option>French</option>
    <option>Science Control</option>
    <option>Art</option>
    </select><br/>
<section> <span>3</span>Contact</section>
    Email: <input type="email" name="email" placeholder="example@domain.com"/><br/>
    Message: <textarea name="message"></textarea><br/>
<section> <span>4</span>Attachment</section>
    CV: <input type="file" name="myFile"/><br/>
    Qualification: <input type="file" name="myFile2"/><br/>
    <input type="submit" value="Apply"
      onclick="toggle_visibility('formDiv'); toggle_visibility('inProgress');
        google.script.run
          .withSuccessHandler(updateOutput)
          .processForm(this.parentNode)" /><br/>
</form>
</div>

<div id="inProgress" style="display: none;">
<!-- Progress starts hidden, but will be shown after form submission. -->
Uploading. Please wait...
</div>

<div id="output">
  <!-- Blank div will be filled with "Thanks.html" after form submission. -->
</div>

＆＃13;

＆＃13;

＆＃13;

这里是Code.gs

＆＃13;

＆＃13;

var submissionSSKey = '1Ed05-havA-Lw-BpYWhYf8Ib7u77oevW3mFZ8m1vQ8HU';
var folderId = "0B2MoK-dDGTVDfkpXNnZvVUhBWlhLZGIxN2Qzcm40WGhJVC0xUzNSbTRiUW04SkdQTG9ncEU";

function doGet(e) {
  var template = HtmlService.createTemplateFromFile('Form.html');
  template.action = ScriptApp.getService().getUrl();
  return template.evaluate();
}


function processForm(theForm) {
  var fileBlob = theForm.myFile;
  var fileBlob2 = theForm.myFile2;
  var folder = DriveApp.getFolderById(folderId);
  var doc = folder.createFile(fileBlob);
  var doc2 = folder.createFile(fileBlob2);


  // Fill in response template
  var template = HtmlService.createTemplateFromFile('Thanks.html');
  var name = template.name = theForm.name;
  var department = template.department = theForm.department;
  var message = template.message = theForm.message;
  var email = template.email = theForm.email;     
  var fileUrl = template.fileUrl = doc.getUrl();
  var fileUrl2 = template.fileUrl = doc2.getUrl();

  // Record submission in spreadsheet
  var sheet = SpreadsheetApp.openById(submissionSSKey).getSheets()[0];
  var lastRow = sheet.getLastRow();
  var targetRange = sheet.getRange(lastRow+1, 1, 1, 6).setValues([[name,department,message,email,fileUrl,fileUrl2]]);

  // Return HTML text for display in page.
  return template.evaluate().getContent();
}

＆＃13;

＆＃13;

＆＃13;

在添加jquery的脚本时，（我不知道代码是否已经首先正确格式化，我已经尽了最大努力）表单已提交，但某些值无效

感谢您提出任何建议或帮助