submy: jQuery plugin to validate inputs from data options

Recommend this page to a friend!
  Info   View files Documentation   View files View files (4)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not yet rated by the usersTotal: 50 All time: 501 This week: 4Up
Version License JavaScript version Categories
submy 1.0.1Custom (specified...5Validation, jQuery, Forms
Description Author

This is a jQuery plugin to validate inputs from data options.

It can takes the rules for validating inputs of a form either from option defined on each input data attribute or from options passed to the plugin initialization.

The plugin can submit the form via AJAX and collect the server response regarding validation in JSON format.

Picture of Mohamed Elbahja
Name: Mohamed Elbahja <contact>
Classes: 1 package by
Country: Morocco Morocco
Age: 27
All time rank: 1781 in Morocco Morocco
Week rank: 6 Up1 in Morocco Morocco Equal

Details

Submy

Submy: JQuery Validation Forms and Ajax Submit Data

Get Started<br>

  • Download Submy.min.js
  • Include JQuery and Submy in your page
  • Include JQuery v2.1 or higher
  • Start coding ... :)

Submy Init

<!DOCTYPE html>
<html>
<head>
    <title>Submy - hello world</title>
</head>
<body>

<form id="login">
       <input type="text" name="username">
       <input type="password" name="pass">
       <div id="message"></div>
       <button id="loginSubmit">submit</button>
</form>

<script type="text/javascript" src="path/to/jquery.min.js"></script>
<script type="text/javascript" src="path/to/Submy.min.js"></script>
<script type="text/javascript">
    // $(selector).submy({ options });

    $('#login').submy({
        submitId: '#loginSubmit', // btn submit id
        messageId: '#message', // respond message id
    }); 
</script>    
</body>
</html>

Create Your Rules

There are two ways to write your own rules, either by data-submy=' JSON Format ' in input or in the options object by rules , you can combine two, provided that there is no conflict of inputs names

Start Example

<form id="startExpl">

       <input name="full-name" data-submy='{"required": true, "type": "text", "min": 4, "max": 30}'>
       <input name="user-name" data-submy='{"required": "please add your username", "type": "username", "min": 4, "max": 10, "typeMesasge": "please add a valid username"}'>
       <input name="user-email" data-submy='{"required": "please add your email", "type": "email", "typeMessage": "please add valid email"}'>
       
       <!-- required false -->
       <select name="ctry">  
           <option value="uk">UK</option>
           <option value="us">USA</option>
       </select>

       <input id="password" name="user-pass" data-submy='{"required": true, "type": "password"}'>

       <input name="conf-pass" data-submy='{"required": true, "type": "password", "is": ["equal", "#password"], "showError": ["after": "#notPassMessage"]}'>

       <div id="notPassMessage"></div>

       <div id="message"></div>

       <button id="loginSubmit">submit</button>
</form>

<script type="text/javascript">
    
    $('#startExpl').submy({
        submitId: '#loginSubmit', 
        messageId: '#message',
        ajax: {
            url: 'http://site.com/sub.php',
            method: 'POST',
            //....
        },
        done: function(text, st, ob) {

            alert('done');
            console.log(text, st, ob);
        }
    }); 
</script>  

Example 2

<form id="ex2">

       <input name="fullname"> <!--See Rules -->
       <input name="user-name" data-submy='{"required": "please add your username", "type": "username", "min": 4, "max": 10, "typeMesasge": "please add a valid username"}'>


       <input name="useremail">
       
       <!-- required false -->
       <select name="ctry">  
           <option value="uk">UK</option>
           <option value="us">USA</option>
       </select>

       <textarea name="text-area" data-submy='{"required": true, "max": 500, "maxMessage": "maximum text is {{max}} chars"}'></textarea>

       <input id="password" name="user-pass" data-submy='{"required": true, "type": "password"}'>

       <input name="conf-pass" data-submy='{"required": true, "type": "password", "is": ["equal", "#password"], "showError": ["after", "#notPassMessage"]}'>

       <div id="notPassMessage"></div>

       <input name="thisFile" data-submy='{"type": "file", "typeMessage": "please add your image", "minSize": 30, "minSizeMessage": "min file size is {{min}}", "maxSize": 500000}'>
       
       
        <input value="checkbox value test" data-submy='{"type": "checkbox", "required": true}'>
       
       <div id="message"></div>

       <button id="loginSubmit">submit</button>
</form>

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="Submy.min.js"></script>
<script type="text/javascript">
    
    $('#ex2').submy({
        submitId: '#loginSubmit', 
        messageId: '#message',
        fileUpload: true,
        rules: {
            fullname: {
                required: true, 
                type: "text", 
                min: 4, 
                max: 30
            },
            useremail: {
                required: "please add your email", 
                type: "email", 
                typeMessage: "please add valid email"
            }
        },
        ajax: {
            url: 'http://site.com/submit.php',
            //method: 'POST', ajax default method is POST
            //....
        },
    }); 
</script>  

submit.php

<?php

print_r($_FILES);
print_r($_POST);

submit.php example 2

<?php

$res = new \stdClass;

$res->type = 'danger'; // info , success ...
$res->message = 'email not exists';

echo json_encode($res);

submit.php example 3

<?php

// echo '<script>alert("hi");</script>';
echo '<div> test </div>';

Submy Options

| Option | Type | Default | Description | |------------|-------------------|--------------|-----------------------------------------------------------------------------------------------------| | submitId | string | #submit | form submit btn id | | messageId | string | #formMessage | form message id | | validOn | string | submit | valid form on submit btn click or form change | | rules | object | {} | inputs rules | | fileUpload | boolean | false | file upload in form | | charset | string | UTF-8 | form charset | | errConsole | boolean | true | show submy error, warn , log | | showError | array | [] | default show input error : [] after input , ['before', '#test'], ['after', '#test'], ['in', 'test'] | | jsonDone | callback function | false | submy json done function | | done | callback function | false | ajax done |

Submy Rules Options

| Options | Types | Default | Description | |----------------|-------------------|-------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------| | required | boolean or string | false , if true defualt is : this field is required , if type = file : please choose file | input/select/textarea/input file are required ? | | type | string | input type attr | input content types : file , text , email, url, number, username, checkbox, radio . for validation (date types now not supported , next update Inchaallah in v1.2) | | typeMessage | string | this field is not valid | type option error message | | min | number | | minimum number if type = number , minimum length if type = text | | minMessage | string | minimum length is: {{min}} | minimum number is: {{min}} | min option error message | | max | number | maximum length is: {{max}} | maximum number is: {{max}} | maximum number if type = number , maximum length if type = text | | is | array | [] | run submyIsFunctions : ["equal", "#xInput"] : check this input value is === #xInput input value | | isEqual | string | error in this field | is equal error message | | types | array | ['/'] | determine file mime types ex : ['image/png', 'image/jpeg', 'image/gif'] | | typesMessage | string | file type is not allowed | types options error message | | minSize | number | | file minimum size by bytes | | minSizeMessage | string | minimum file size is: {{min}} | minSize error message | | maxSize | number | | max file size by bytes | | maxSizeMessage | string | maximum file size is: {{max}} | maxSize error message |

full documentation is coming

Support & Bugs

Submit Bug reports on: mohamed@elbahja.me

License

Copyright © Mohamed Elbahja . GPL-3.0

  Files folder image Files  
File Role Description
Accessible without login Plain text file LICENSE Lic. License
Accessible without login Plain text file README.md Doc. Documentation
Plain text file Submy.js Class Class source
Plain text file Submy.min.js Class Class source

 Version Control Unique User Downloads Download Rankings  
 100%
Total:50
This week:0
All time:501
This week:4Up