3 Replies Latest reply on Nov 5, 2013 2:07 PM by WTF_2012

    Can't find jquery form validator in Behaviors as shown in video demo

    WTF_2012

      I am on Win 8.1 using DW CC and am trying to add a validation script for my forms. According to the Video the New feature in DW CC has dropped the Spry scripts in favor of more standardized Jquery scripts for validation. Sounds great ...if they were there.... The Spry scripts are gone...but I can't find any Jquery replacements. This upgrade from 6 may have been a mistake.

        • 2. Re: Can't find jquery form validator in Behaviors as shown in video demo
          Nancy OShea Adobe Community Professional & MVP

          Use an HTML5 form with the jQuery Validate  like so:

           

           

          <!doctype html>
          <html>
          <head>
          <meta charset="utf-8">
          <title> HTML5 Form with jQuery Validation</title>
          
          
          <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
          
          <!--JQUERY LATEST-->
          <script src="http://code.jquery.com/jquery-latest.min.js">
          </script>
          
          <!--JQUERY VALIDATE-->
          <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js">
          </script>
          
          
          <style>
          * {
              /**put this into your CSS Reset**/
              box-sizing: border-box;
              -moz-box-sizing: border-box;
              -webkit-box-sizing: border-box;
          }
          body {
              font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
              font-size: 100%;
          }
          
          /**BEGIN FORM STYLES**/
          form {
              font-size: 14px;
              width: 880px; /**adjust width in %, px or em*/
              margin: 0 auto; /**adjust margins as needed*/
              background: #FFF;
              padding: 2%;
          }
          
          form fieldset {
              margin-bottom: 5px;
              background: #ADC9A5;
          }
          form legend {
          display:block;
              padding: 8px;
              background: #537374;
              font-weight: bold;
              color: #FFF;
              line-height: 1.5;
          }
          /**wrap form lables and fields inside ordered lists for better web accessibility**/
          form ol {
              list-style: none;
              margin: 0;
              padding: 0
          }
          form li {
              padding: 5px;
              margin: 0;
              clear: left;
          }
          form label {
              display: inline-block;
              float: left;
              line-height: 23px; /**lines up labels with fields**/
              width: 20%;
              font-size: 18px;
              text-align: right;
              margin-right: 10px; /*space between labels, fields*/
          }
          form textarea, form input:not([type="submit"]) {
              width: 45%; /**same width on input fields**/
              padding: 5px;
              color: #333;
              font-family: Arial, Helvetica, sans-serif;
              font-size: 18px;
              background: #F2F6DF;
          }
          /**radio buttons, checkboxes**/
          form input[type=radio], 
          form input[type=checkbox] {
              width: 1.5em;
              height: 1.5em;
              vertical-align: middle;
              display:inline-block;
          }
          form select {
              width: 46.5%;
              background: #F2F6DF
          }
          /**field background on focus**/
          form input:focus, form input:active, 
          form textarea:focus, form textarea:active, 
          form select:focus, form select:active { background-color: #DCEDBF; }
          
          form label.error {
              line-height: 1.5em;
              color: #FF4E51;
              background: #E0E4D8;
              padding: 5px;
              font-size: 14px;
              font-weight: 600;
              box-shadow: 1px 2px 3px #333;
          }
          
          #submit {
              width: 25%;
              margin-left: 30%;
              height: 2.5em;
              font-size: 18px
          }
          
          </style>
          </head>
          
          <body>
          
          <!--begin form-->
          <form action="path/your-form-processing-script.php" method="post">
          <h2>HTML5 Form with jQuery Validation</h2>
          
          <fieldset>
          <legend>Required Fields:</legend>
          <ol>
          <li>
          <label for="first_name">Name:</label>
          <input name="first_name" type="text" autofocus required id="first_name" placeholder="First">
          </li>
          <li>
          <label for="last_name">Last:</label>
          <input name="last_name" id="last_name" type="text" required placeholder="Last">
          </li>
          <li>
          <label for="e_mail">E-mail:</label>
          <input name="e_mail" id="e_mail" type="email" required placeholder="yourname@domain.com">
          </li>
          <li>
          <label for="quantity">Quantity:</label>
          <input name="quantity" type="number" required id="quantity" placeholder="Min 5" min="5">
          </li>
          </ol>
          </fieldset>
          <fieldset>
          <legend>Select - Required:</legend>
          <ol>
          <li>
          <label for="MySelect">Select One:</label>
          <select name="MySelect" id="MySelect" size="4" required title="Please select something!">
          <option value="1">Audi</option>
          <option value="2">Saab</option>
          <option value="3">Fiat</option>
          <option value="4">BMW</option>
          </select>
          </li>
          </ol>
          </fieldset>
          <fieldset>
          <Legend>Radio buttons and Checkboxes - Required</Legend>
          <ol>
          <li>
          <label>Gender:</label>
          <label>
          <input name="RadioGroup1" type="radio" required title="??" id="RadioGroup1_0" value="male">
          Male</label>
          <label>
          <input type="radio" name="RadioGroup1" value="female" id="RadioGroup1_1">
          Female</label>
          </li>
          <li>
          <label>Select any:</label>
          <label>
          <input name="CheckboxGroup1" type="checkbox" required title="??" id="CheckboxGroup1_0" value="option1">
          Option 1 </label>
          <label>
          <input type="checkbox" name="CheckboxGroup1" value="option2" id="CheckboxGroup1_1">
          Option 2 </label>
          <label>
          <input type="checkbox" name="CheckboxGroup1" value="option3" id="CheckboxGroup1_2">
          Option 3 </label>
          </li>
          </ol>
          </fieldset>
          <fieldset>
          <legend>Optional Fields:</legend>
          <ol>
          <li>
          <label for="phone">Phone:</label>
          <input name="phone" id="phone" type="tel" placeholder="(area code) 123-4567" />
          </li>
          <li>
          <label for="subject">Subject:</label>
          <input name="subject" id="subject" type="text" />
          </li>
          <li>
          <label for="message">Message:</label>
          <textarea id="message" name="message" placeholder="remarks"></textarea>
          </li>
          <li>
          <label for="submit"></label>
          <input id="submit" name="submit" type="submit" value="SEND">
          </li>
          </ol>
          </fieldset>
          </form>
          <!--end form-->
          
          
          <!--invoke form validation-->
          <script>
          $(document).ready(function() {
              $("form").validate();
          });
          </script>
          </body>
          </html>
          

           

           

           

          Nancy O.

          1 person found this helpful
          • 3. Re: Can't find jquery form validator in Behaviors as shown in video demo
            WTF_2012 Level 1

            Thanks for the reply Nancy, but the issue is that a Feature of the new

            Dreamweaver CC is suppose to have the Validate snippets available to

            insert as you code a form. It is shown in a video Adobe has produced to

            sell us on Creative Cloud , but it isn't in the Program.

             

            I have used the Jquery validate script, but wanted the integrated code

            available from within Dreamweaver as promised.

             

            Ronald J Bigus

            Cell (850) 624-3806

            Visit http://www.RonBigus.com

            for complete MLS searches