Hi there

I use SugarCRM 5.5.4 CE

I´ve been searching a way to get text fields a minimum input length, i.e. telephone numbers, into my web-to-lead form. I'm not a coder, so I don't know exactly how to achieve this.

What I did until now is this:

The start of the form
Code:
function submit_form(){
	// Make quick references to our fields
	
	var telefon_c = document.getElementById('telefon_c');
	
	// Check each input in the order that it appears in the form!
	
					if(lengthRestriction(telefon_c, 6, 8)){
						
							return true;
						}
	
	return false;
	
}

function lengthRestriction(elem, min, max){
	var uInput = elem.value;
	if(uInput.length >= min && uInput.length <= max){
		return true;
	}else{
		alert("Please enter between " +min+ " and " +max+ " characters");
		elem.focus();
		return false;
	}
}
The middle
Code:
<form action="http://mysite.com/index.php?entryPoint=WebToLeadCapture" name="WebToLeadForm" method="POST" id="WebToLeadForm" onclick='return formValidator()'>
<table style="border-top: 1px solid; border-bottom: 1px solid; padding: 10px 6px 12px 10px; background-color: #e9f3ff; font-size: 12px; background-repeat: repeat-x; background-position: center top; width: 100%;">
<tbody>
<tr style="color: #0069e1; font-family: Arial,Verdana,Helvetica,sans-serif; font-size: 18px; font-weight: bold; margin-bottom: 0px; margin-top: 0px;" align="center">
<td colspan="2"><strong>
<h2>test</h2>
</strong></td>
</tr>
<tr>
<td style="text-align: left; font-size: 12px; font-weight: normal;" width="15%"><span sugar="slot">Last Name: </span><span class="required" style="color: #ff0000;">*</span></td>
<td style="font-size: 12px; font-weight: normal;"><span sugar="slot"><input id="last_name" name="telefon_c" type="text" /> </span></td>
</tr>
<tr>
<td style="text-align: left; font-size: 12px; font-weight: normal;" width="15%"><span sugar="slot">Email Address: </span></td>
<td style="font-size: 12px; font-weight: normal;"><span sugar="slot"><input id="webtolead_email1" name="webtolead_email1" onchange="validateEmailAdd();" type="text" /></span><span sugar="slot"> </span><span sugar="slot"> </span></td>
</tr>
<tr style="color: #0069e1; font-family: Arial,Verdana,Helvetica,sans-serif; font-size: 18px; font-weight: bold; margin-bottom: 0px; margin-top: 0px;" align="center">
<td colspan="2"></td>
</tr>
<tr align="center">
<td colspan="4"><input onclick="submit_form();" class="button" name="Submit" value="Submit" type="button" /> <input type="reset" /></td>
</tr>
<tr>
<td><input id="campaign_id" name="campaign_id" value="aew47ec0-3892-d9ec-b28b-4c3ede2108ea" type="hidden" /></td>
</tr>
<tr>
<td><input id="assigned_user_id" name="assigned_user_id" value="1" type="hidden" /></td>
</tr>
<tr>
<td><input id="req_id" name="req_id" value="telefon_c;" type="hidden" /></td>
</tr>
</tbody>
</table>
</form>
And the end of the form
Code:
<script type="text/javascript">
// <![CDATA[
 function submit_form(){
   if(typeof(validateCaptchaAndSubmit)!='undefined'){
     validateCaptchaAndSubmit();
   }else{
     check_webtolead_fields();
   }
 }
 function check_webtolead_fields(){
     if(document.getElementById('bool_id') != null){
        var reqs=document.getElementById('bool_id').value;
        bools = reqs.substring(0,reqs.lastIndexOf(';'));
        var bool_fields = new Array();
        var bool_fields = bools.split(';');
        nbr_fields = bool_fields.length;
        for(var i=0;i<nbr_fields;i++){
          if(document.getElementById(bool_fields[i]).value == 'on'){
             document.getElementById(bool_fields[i]).value = 1;
          }
          else{
             document.getElementById(bool_fields[i]).value = 0;
          }
        }
      }
    if(document.getElementById('req_id') != null){
        var reqs=document.getElementById('req_id').value;
        reqs = reqs.substring(0,reqs.lastIndexOf(';'));
        var req_fields = new Array();
        var req_fields = reqs.split(';');
        nbr_fields = req_fields.length;
        var req = true;
        for(var i=0;i<nbr_fields;i++){
          if(document.getElementById(req_fields[i]).value.length <=0 || document.getElementById(req_fields[i]).value==0){
           req = false;
           break;
          }
        }
        if(req){
            document.WebToLeadForm.submit();
            return true;
        }
        else{
          alert('Please provide all the required fields');
          return false;
         }
        return false
   }
   else{
    document.WebToLeadForm.submit();
   }
}
function validateEmailAdd(){
  if(document.getElementById('webtolead_email1').value.length >0) {
    if(document.getElementById('webtolead_email1').value.match(/^\w+(['\.\-\+]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,})+$/) == null){
      alert('Not a valid email address');
    }
  }
  if(document.getElementById('webtolead_email2').value.length >0) {
    if(document.getElementById('webtolead_email2').value.match(/^\w+(['\.\-\+]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,})+$/) == null){
      alert('Not a valid email address');
    }
  }
function formValidator(){
  // Make quick references to our fields
  
  var last_name= document.getElementById('last_name');
  
  // Check each input in the order that it appears in the form!
  
     if(lengthRestriction(last_name, 6, 8)){
      
  }
  
  
  return false;
  
}

function lengthRestriction(elem, min, max){
  var uInput = elem.value;
  if(uInput.length >= min && uInput.length <= max){
  return true;
  }else{
  alert("Please enter between " +min+ " and " +max+ " characters");
  elem.focus();
  return false;
  }
}}SCRIPT
// ]]>
</script>
What happens is that a window pops up before the user starts filling out the restricted field.

So it could be nice if the javascript is implemented into the autogenerated form. Or in some other way

I hope this might become handy to other users to