Use Really_easy_field_validation_with_Prototype for form verification, the specific content is as follows
1. The first step is of course to introduce js and css files first.
<link href="${ ctx}/skin/css/validation.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="${ ctx}/scripts/prototype.js"></script> <script type="text/javascript" src="${ ctx}/scripts/validation.js"></script>2. Then I added the following code at the beginning of the page (I put this code in meta.jsp because each jsp contains it in the header.)
function afterLoaded(){ if(document.all){ var forms = document.forms; if(forms.length > 0){ for(var i = 0; i < forms.length; i++){ if(forms[i]["method:save"]) new Validation(forms[i]); } } window.clearInterval(inteval); integer = null; } } var integer = window.setInterval("afterLoaded();", 500 );3. If you want to verify an input box, just add some logos to its class. like
Copy the code code as follows:<input type="text" name="payable.howMuch" value="" id="payable_howMuch"/>
This means that this field is required and needs to be a number. For other content, just look at the code at the end of validation.js and you will understand.
4. In addition, I made some modifications to validation.js, because one of our forms has multiple submit buttons, and generally only the name=method:save button needs to be triggered when it is clicked, so the verification js is modified.
Put the original one
The code copy is as follows: if(this.options.onSubmit) Event.observe(this.form,'submit',this.onSubmit.bind(this),false);
Change to
The code copy is as follows: if(this.options.onSubmit) Event.observe(this.form["method:save"],'click',this.onSubmit.bind(this),false);
There are problems with this, but for what we are now, this is more suitable.
5. The original css has had an impact on buttons, etc., so I removed all the contents of those borders.
6. This verification framework seems to only consider some situations. If you want to use it flexibly, you have to take some time to understand it in detail. It also provides a callback mechanism. After downloading its original version, you can see the demonstration in the html.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.