sails.jsajax-forms

SailsJs ajax-form validation


Is there a way I can run a function on the built-in vue component "ajax-form" in SailsJs? I want it to run when the form is submitted and do some validation, but take place before the data is sent to the back end.


Solution

  • Ajax-form is super handy. And it's well supported by Sails.js

    Here is an example of how you can set up your form:

    <ajax-form action="createOneThing" :syncing.sync="syncing" :cloud-error.sync="cloudError" 
    :form-errors.sync="createThingFormErrors" :form-data="createThingFormData"
    :form-rules="createThingFormRules" @submitted="submittedCreateThingForm($event)">
    
       <label for="thing-name">Thing Name:</label>
       <input class="form-control" :class="[createThingFormErrors.thingName ? 'is-invalid' : '']" 
       type="text" id="thing-name" v-model="createThingFormData.thingName">
       <div class="invalid-feedback" v-if="createThingFormErrors.thingName">Make up a name for your thing.</div>
    
    
       <ajax-button type="submit" :syncing="syncing">Delete</ajax-button>
    
    </ajax-form>
    

    Now you have to make sure you set your objects in your page script under data:

        createThingFormData: {},
        createThingFormErrors: {},
        createThingFormRules: {
         thingName: { required: true },
        }
    

    You can also check out this post for more usage info about Ajax https://www.formget.com/form-validation-using-ajax/