First, introduce jquery,Validform, and layer

<script src="../js/jquery.min.js"></script>
<script src="../layer/layer.js"></script>
<script src="../js/Validform_v5.3.2_min.js"></script>

Form form with code

<form class="demoform">
<ul class="am-u-sm-12 am-u-md-6 am-cf">
    <li>Native place:<input type="text" value="Wuhan" datatype="*" nullmsg="Please fill in your place of origin"></li>
    <li>Nation:<input type="text" value="Han nationality"  datatype="*" nullmsg="Please fill in the national information." ></li>
    <li>Cell-phone number:<input type="text" datatype="m" nullmsg="Please fill in your cell phone number." errormsg="Please fill in the correct cell phone number." value="18888888888"></li>
    <li>Mail box:<input type="text" datatype="e" errormsg="Please fill in the correct e-mail address." nullmsg="Please fill in your e-mail" value="2666@qq.com"></li>
    <li>Detailed address of family:<input type="text" value="address" datatype="*" nullmsg="Please fill in the detailed address of your family."></li>
</ul>
</form>

Relevant Settings on validform

$('.demoform').Validform({
    btnSubmit:"#btn_sub", 
    btnReset:".btn_reset",
    tiptype:1, 
    ignoreHidden:false,
    dragonfly:false,
    tipSweep:true,
    label:".label",
    showAllError:false,
    postonce:true,
    ajaxPost:true,
    datatype:{},
    usePlugin:{
        swfupload:{},
        datepicker:{},
        passwordstrength:{},
        jqtransform:{
            selector:"select,input"
        }
    },
    beforeCheck:function(curform){
        //The curform parameter is the current form object for the function executed before the form submission performs validation.
        //Here is clear.return falseThe validation operation will not continue.;    
    },
    beforeSubmit:function(curform){
        //After the validation is successful, the function executed before the form is submitted, and the curform parameter is the current form object.
        //Here is clear.return falseThe form will not be submitted.;    
    },
    callback:function(data){
        //The data returned is a json object.{"info":"demo info","status":"y"}
        //info: Output prompt information;
        //Status: Returns the status of the submitted data and whether the submission was successful. If you can use it"y"Expressing the success of the submission,"n"Represents a submission failure at ajax_post.php Self-defined characters in file return data, mainly used for callback Perform callback operations based on this value in the function;
        //You can also get more information from the ajax_post.php file and do the corresponding operations.
        //ajax also performs callbacks when it encounters server-side errors, when data is {status:**, statusText:**, readyState:**, responseText:**};

        //The callback operation is performed here.
        //Note: If the form is not submitted in ajax mode and callback is passed in, then the data parameter is the current form object, and the callback function will be executed after all the form validation has been passed, then it will decide whether to submit the form or not, if it is clear in the callback.return false，The form will not be submitted ifreturn trueOr notreturn，A form will be submitted.
    }
});

The above is the configuration description of validform, referring specifically to the original api address of validform: validform API

tiptype is the most important parameter to do form validation prompt with layer.

Parameter description of tiptype

Available values are: 1, 2, 3, 4 and function functions, and the default tiptype is 1. 3 and 4 are new versions of 5.2.1
1=> Custom pop-up box prompt;
2=> Side Tips (the object displaying the prompt information will be found at the child level of the next object of the parent of the current element, and a custom prompt box will pop up when the form is submitted with ajax to show the status of the form submission);
3=> Side Tips (the object displaying the prompt information will be found in the siblings object of the current element, and a custom prompt box will pop up when the form is submitted with ajax to show the status of the form submission);
4=> Side Tips (the object displaying the prompt information will be found under the next object of the parent of the current element, and the submission status of the form will not be displayed when the form is submitted with ajax);
If the four tips above are not what you need, you can pass custom functions to tiptype. By using custom functions, you can achieve any prompt effect you want:

tiptype:function(msg,o,cssctl){
    //msg: prompt information;
    //o:{obj:*,type:*,curform:*},
    //Obj refers to the form element (or form object) that is currently validated (all validations pass, and o.obj is the form object when submitting the form).
    //type indicates the status of the prompt, with values of 1, 2, 3, 4, 1: data being detected/submitted, 2: validation, 3: validation failure, and 4: ignore status. 
    //curform is the current form object;
    //cssctl: Built-in prompt information style control function, which needs to pass in two parameters: the object displaying the prompt information and the status of the current prompt (type in the formal parameter o);
}

When tiptype is not 1, Validform finds the label with class "Validform_checktip" to display the prompt information. When tiptype=1, a pop-up box is automatically created to display the prompt information.
The location relationship between Validform_checktip and form elements will have a corresponding structure based on the value of tiptype, as explained above.
Starting with version 5.3, Validform_checktip objects are automatically created based on tiptype values if there is no label showing error information on the page.

JS logic layer code

$(".demoform").Validform({
    // tiptype, custom pop-up layer
    tiptype:function(msg,o){
        if (o.type == 3){
            // Relevant information pops up only when validation fails
            layer.msg(msg, {time: 800}); 
        }
    }
})