Form

Dynamic placeholder [zb-placeholder="value"]


 
...

Required [zb-required]


 
...

Check fields [zb-check="type, callback"]

  • Default
  • Callback
  • Custom

 
...
  • HTML
  • JS

 
... ...

 const checkUserAge = (data) => {

   // data.value
   // data.isValid
   // data.msg

   if( !data.isValid  ) {
       data.msg= data.value + " " + data.msg;

   } else if( data.value > 122 ) {
       data.isValid=  false;
       data.msg = "I'm not buying it";

   } else data.msg= "";

   $('#age-message').html(data.msg);
 }

  • HTML
  • JS

 
... ...

 const checkUserPassword = (data) => {
    if( data.value.length < 8 ) {
       data.isValid=  false;
       data.msg = "The password must be at least 8 characters";
       $('#pwd-msg').html(data.msg);
    }
    return data
 }

 const checkConfirmPassword = (data) => {
    const pwd = $('#pwd').val();
    if( data.value != pwd  ) {
       data.isValid=  false;
       data.msg = "Passwords does not match";
       $('#conf-pwd-msg').html(data.msg);
    }
    return data
 }

Form Class

To get access to one of your Form instance use the static method Form.get(id).
Then you can controle your instance with the following methods : .serialize(), .jsonData(), .formData(), .getPath().

  • HTML
  • JS

  
... ...

   const submitForm = e => {

      const form = Form.get("the-form");

      form.serialize();
      // return "phone=424%20424%204242&email=john%40doe.com"

      form.jsonData()
      // return { 'phone': '424 424 4242', 'email': 'john@doe.com'}

      form.formData()
      // return FormData {}

      form.getPath()
      // return "/path/to/controller/"

   }

		
Submit
Coming soon

Oops sorry!!!

This content is not available yet.