Just-validate/index.html at master · mymro/Just-validate · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Just-validate demo</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <style>
    .no-float {
      float: none;
    }

    .mt30 {
      margin-top: 30px;
    }

    .js-validate-error-label {
      margin-top: 5px;
    }

    .form__radio, .form__checkbox {
      margin-right: 7px !important;
    }
  </style>
</head>
<body class="container">
<div class="col-md-6 center-block no-float mt30">
  <h2>Classic validation</h2>
  <form action="#" class="js-form form">
    <div class="row">
      <div class="form-group col-md-6">
        <label for="name">Enter your name</label>
        <input type="text" class="form__input form-control" placeholder="Enter your name" autocomplete="off" data-validate-field="name" name="name" id="name">
      </div>
      <div class="form-group col-md-6">
        <label for="email">Enter your email</label>
        <input type="email" class="form__input form-control" placeholder="Enter your email" autocomplete="off" data-validate-field="email" name="email" id="email">
      </div>
    </div>
    <div class="form-group">
      <label for="password">Enter your password</label>
      <input type="password" class="form__input form-control" placeholder="Enter your password" autocomplete="off" data-validate-field="password" name="password" id="password">
    </div>
    <div class="form-group">
      <label for="password">Enter your text</label>
      <textarea name="msg" cols="30" rows="10" class="form__textarea form-control" data-validate-field="text" id="text"></textarea>
    </div>
    <div class="form-group">
      <input type="checkbox" id="checkbox" class="form__checkbox" data-validate-field="checkbox" checked><label for="checkbox">I agree</label>
    </div>
    <div class="form-group">
      <label><input type="checkbox" class="form__checkbox" data-validate-field="checkbox2" checked>I agree</label>
    </div>
    <div class="form-group">
      <label><input type="radio" name="radio" class="form__radio" data-validate-field="radio">Male</label>
      <br>
      <label><input type="radio" name="radio" class="form__radio" data-validate-field="radio">Female</label>
    </div>
    <button class="form__btn btn btn-primary">SUBMIT</button>
  </form>
  <br>


  <h2>Remote validation with custom messages</h2>
  <div>Plugin sends values Email and Login to test API. For success validation values must be equal:</div>
  <div>Email: ok@test.com</div>
  <div>Login: testLogin</div>
  <br>
  <form action="#" class="js-form-2 form">
    <div class="row">
      <div class="form-group col-md-6">
        <label for="name">Enter your name</label>
        <input type="text" class="form__input form-control" placeholder="Enter your name" autocomplete="off" data-validate-field="name" name="name" id="name-1">
      </div>
      <div class="form-group col-md-6">
        <label for="email">Enter your email</label>
        <input type="email" class="form__input form-control" placeholder="Enter your email" autocomplete="off" data-validate-field="email" name="email" id="email-1">
      </div>
      <div class="form-group col-md-6">
        <label for="login">Enter your login</label>
        <input type="text" class="form__input form-control" placeholder="Enter your login" autocomplete="off" data-validate-field="login" name="login" id="login">
      </div>
    </div>
    <button class="form__btn btn btn-primary">SUBMIT</button>
  </form>
</div>

<script src="dist/js/just-validate.min.js"></script>

<script>
    new window.JustValidate('.js-form', {
        rules: {
            radio: {
                required: true
            },
            checkbox: {
                required: true
            },
            checkbox2: {
                required: true
            },
            email: {
                required: true,
                email: true,
            }
        },

        submitHandler: function (form, values, ajax) {
            ajax({
                url: 'https://just-validate-api.herokuapp.com/submit',
                method: 'POST',
                data: values,
                async: true,
                callback: function (response) {
                    alert('AJAX submit successful! \nResponse from server:' + response)
                },
                error: function (response) {
                    alert('AJAX submit error! \nResponse from server:' + response)
                }
            });
        },
    });

    new window.JustValidate('.js-form-2', {
            rules: {
                email: {
                    required: true,
                    email: true,
                    remote: {
                        url: 'https://just-validate-api.herokuapp.com/check-correct',
                        sendParam: 'email',
                        successAnswer: 'OK',
                        method: 'GET'
                    }
                },
                login: {
                    required: true,
                    remote: {
                        url: 'https://just-validate-api.herokuapp.com/check-correct',
                        sendParam: 'login',
                        successAnswer: 'OK',
                        method: 'GET'
                    }
                }
            },
            messages: {
                email: {
                    remote: 'Email already exist',
                    email: 'Email not valid!'
                },
                login: {
                    remote: 'Login already exist',
                    required: 'Login is required!'
                }
            },
        }
    );
</script>

</body>
</html>