JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<form id="Myform" method="post" action="#">
  <table>
    <tr>
      <td>Cloud name:</td>
      <td><input type="text" name="cloudname"></td>
    </tr>
    <tr>
      <td>API Key:</td>
      <td><input type="text" name="apikey"></td>
    </tr>
    <tr>
      <td>API Secret:</td>
      <td><input type="text" name="apisecret"></td>
    </tr>
    <tr>
      <td>Public_ID (file name):</td>
      <td><input type="text" name="publicid"></td>
    </tr>
    <tr>
      <td>Resource Type:</td>
      <td><input type="text" name="resourcetype" text="video">    </td>
   <tr>
      <td>Type:</td>
      <td><input type="text" name="resourcetype" text="upload">    </td>
   </tr>
   <tr>
      <td>Transformations:</td>
      <td><input type="text" name="transformations"></td>
    </tr>
    <tr>
      <td><input type="submit" value="Submit">
      </td>
    </tr>
  </table>
</form>

JavaScript

$(document).ready(function () {
    $("#Myform").validate({
        rules: {
            "cloudname": {
                required: true,
                minlength: 5
            },
            "apikey": {
                required: true,
                minlength: 5
            }
        },
        messages: {
            "name": {
                required: "Please, enter a name"
            },
            "email": {
                required: "Please, enter an email",
                email: "Email is invalid"
            }
        },
        submitHandler: function (form) { // for demo
            alert('valid form submitted'); // for demo
            return false; // for demo
        }
    });

});


/* cloudinary.v2.uploader.upload("dog.mp4", 
        { resource_type: "video", 
        eager: [
            { width: 300, height: 300,
              crop: "pad", audio_codec: "none" }, 
          { width: 160, height: 100,
                  crop: "crop", gravity: "south",
                  audio_codec: "none" } ],                                   
        eager_async: true,
            eager_notification_url: "http://mysite/notify_endpoint"     },
        function(error, result) { console.log(result, error); });
 */