RealyEasy Verification Details for the js Verification Framework

  • 2021-06-28 10:07:22
  • OfStack

Using Really_easy_field_validation_with_Prototype validates the form as follows

1. The first step, of course, is to introduce the 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/effects.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); 
 
    inteval = null; 
 
  } 
 
} 
 
var inteval = window.setInterval("afterLoaded();", 500 );  

3. If you want to validate an input box, just add a few flags to his class.as

<input type="text" name="payable.howMuch" value="" id="payable_howMuch" class="required validate-number"/>

This means that this field is required and needs to be a number.For the rest, just look at the code at the end of validation.js.
4. In addition, I have made some modifications to validation.js, because we have multiple submit buttons on a form, and generally only the button name=method:save needs to trigger validation when it is clicked, so we have modified the validation js.
Will be the original
if(this.options.onSubmit) Event.observe(this.form,'submit',this.onSubmit.bind(this),false);  

Change to
 if(this.options.onSubmit) Event.observe(this.form["method:save"],'click',this.onSubmit.bind(this),false);  

There are problems, but this is more appropriate for what we are like now.
5. The original css had an effect on buttons and so on, so I removed all the contents of border.
6. This validation framework seems to only consider a few cases. It will take a little time to understand the details before it can be used flexibly. It also provides the callback mechanism. After downloading its original version, you can see the demonstration in html.


Related articles: