Form. Capcha check not working. Validity check?

E

Evgeny Kotov2014-10-29 14:22:56

PHP

Evgeny Kotov, 2014-10-29 14:22:56

My problem is the following.
I am not a professional developer or programmer.
But on the part of the management, the task was to make the form in a short time.
I didn’t achieve much success and there is a request to catch errors in the code.
index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Formular </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf" />
<link rel="stylesheet" href="style_html.css" type="text/css" media="screen" />
</head>
<body>

<script type="text/javascript" src="jquery-1.5.1.min.js" charset="utf"></script>
<script type="text/javascript" src="validation.js" charset="utf"></script>



<div id="content">
<form id="jform" action="" method="post">
         <fieldset>
         <legend>Personal Info</legend>
    	<label for="fullname" class="block">Vorname</label>
    <input  type="text" name="fullname" id="fullname" placeholder="Vorname"  />
    	

         	<label for="name" class="block">Name</label>
    <input  type="text" name="name" id="name" placeholder="Name" />
    
         	
    <label for="adresse" class="block">Strasse und Hausnummer</label>
    <input  type="text" name="adresse" id="adresse" placeholder="Strasse und Hausnummer" />
    

        	<label for="telefon" class="block">Telefon</label>
    <input  type="text" name="telefon" id="telefon" placeholder="Telefon" />
    
         	
    <label for="emailid" class="block">E-mailadresse</label>
    <input  type="text" name="emailid" id="emailid" placeholder="E-mailadresse"  />
    
         </fieldset>
  
   <fieldset>
                <legend>Zähler</legend>
    
    <label for="kundenummer" class="block">Kundenummer</label>
    <input  type="text" name="kundenummer" placeholder="Kundenummer" />
    
         
                <label for="zaehlernummer" class="block">Zählernummer</label>
    <input  type="text" name="zaehlernummer" placeholder="Zählernummer" />
    
         
                <label for="zaehlerstand" class="block">Zählerstand</label>
    <input  type="text" name="zaehlerstand" placeholder="Zählerstand" />
            <br />
         </fieldset>
   <fieldset>
                <legend>Bemerkungen</legend>
     <textarea rows="7" cols="50" name="comments" placeholder="Bemerkungen"></textarea>
            
         </fieldset>

 	 <fieldset>
                <legend>Sicherheits</legend>


    
                <td id="imgparent">
    <div id="imgdiv"><img id="reload" src="images/reload.png" /><img id="img" src="captcha.php" /></td>

               </div>
                
    
                <label for="captcha" class="block">Enter Image Text:</label>
    <input  type="text" name="captcha" id="captcha" placeholder="captcha" />
    
    

  
                <br>
    <p>
                     <label class="block">Datenschutz:</label>
                                
                     <input type="radio" name="dschutz" id="dschutz" value="dschutz" /> <label for="dschutz">Stumme zu</label>
                </p>
 	  	
 	  	<p>
    <button type="submit" id="send" action="mail.php" >Senden</button>	
    </p>



  
</form>
</div><!-- content -->
</body>
</html>

validation.js

$(document).ready(function(){

// ====================================================== //

 
var jVal = {
  'fullName' : function() {
  
    $('body').append('<div id="nameInfo" class="info"></div>');
    
    var nameInfo = $('#nameInfo');
    var ele = $('#fullname');
    var pos = ele.offset();
    
    nameInfo.css({
      top: pos.top-3,
      left: pos.left+ele.width()+15
    });
    
    if(ele.val().length < 3) {
      jVal.errors = true;
        nameInfo.removeClass('correct').addClass('error').html('&larr; Vorname darf nischt weniger als 3 Buchstaben sein !').show();
        ele.removeClass('normal').addClass('wrong');				
    } else {
        nameInfo.removeClass('error').addClass('correct').html('&radic;').show();
        ele.removeClass('wrong').addClass('normal');
    }
  },
  
  
  
  'email' : function() {
  
    $('body').append('<div id="emailInfo" class="info"></div>');
  
    var emailInfo = $('#emailInfo');
    var ele = $('#emailid');
    var pos = ele.offset();
    
    emailInfo.css({
      top: pos.top-3,
      left: pos.left+ele.width()+15
    });
    
    var patt = /^[email protected]+[.].{2,}$/i;
    
    if(!patt.test(ele.val())) {
      jVal.errors = true;
        emailInfo.removeClass('correct').addClass('error').html('&larr; Falsche E-mailadresse.').show();
        ele.removeClass('normal').addClass('wrong');					
    } else {
        emailInfo.removeClass('error').addClass('correct').html('&radic;').show();
        ele.removeClass('wrong').addClass('normal');
    }
  },
  
  


  'captcha' : function() {
  
    $('body').append('<div id="captcha" class="info"></div>');
    
    var captchaInfo = $('#captchaInfo');
    var ele = $('#captcha');
    var pos = ele.offset();
    
    captcha.css({
      top: pos.top-3,
      left: pos.left+ele.width()+15
    });
    
    if(ele.val().length < 6) {
      jVal.errors = true;
        captchaInfo.removeClass('correct').addClass('error').html('&larr; Zu Kurz').show();
        ele.removeClass('normal').addClass('wrong');				
    } else {
        captchaInfo.removeClass('error').addClass('correct').html('&radic;').show();
        ele.removeClass('wrong').addClass('normal');
    }
  },
  
  'dschutz' : function (){
        $('body').append('<div id="dschutzInfo" class="info"></div>');
        var dschutzInfo = $('#dschutzInfo');
        var ele = $('#dschutz');
        var pos = ele.offset();
        dschutzInfo.css({
                top: pos.top-10,
                left: pos.left+ele.width()+60
        });
        if($('input[name="dschutz"]:checked').length === 0) {
                jVal.errors = true;
                        dschutzInfo.removeClass('correct').addClass('error').html('? Datenschutz').show();
                        ele.removeClass('normal').addClass('wrong');
        } else {
                        dschutzInfo.removeClass('error').addClass('correct').html('v').show();
                        ele.removeClass('wrong').addClass('normal');
        }
  },




  
  'sendIt' : function (){
    if(!jVal.errors) {
      $('#jform').submit();
    }
  }
};

// ====================================================== //



$('#send').click(function (){
  var obj = $.browser.webkit ? $('body') : $('html');
  obj.animate({ scrollTop: $('#jform').offset().top }, 750, function (){
    jVal.errors = false;
    jVal.fullName();
    jVal.email();
    jVal.captcha();
    jVal.dschutz();
    jVal.sendIt();
  });
  return false;
});

$('#fullname').change(jVal.fullName);
$('#emailid').change(jVal.email);
$('#captcha').change(jVal.captchaInfo);
$('input[name="dschutz"]').change(jVal.dschutz);
$("#reload").click(function() {
        $("#img").remove();
        $('<img id="img" src="captcha.php" />').appendTo("#imgdiv");
});



// ====================================================== //
});

The main problem lies in the validation.js syntax . We
kindly request, given my incomplete knowledge of programming, I would like details.

Thank you very much for your attention and understanding.

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

F

FanatPHP, 2014-10-29
@FanatPHP

you here.

A

Alexander Taratin, 2014-10-29
@Taraflex

I'm too lazy to understand the code . I advise you to look at the jqueryvalidation.org/documentation
plugin