atiquratik
atiquratik

Reputation: 1300

form validation in php/ajax

i was trying to add an exception like if user input nothing or input wrong 'Contact ID' and press enter, an error message will come out & notifying user that ID not found. any help? thanks in advance:) here is my index.html file.

<html> 
    <body> 
        <script language="javascript" type="text/javascript">

    function ajaxFunction(e){
    var e=e || window.event;
    var keycode=e.which || e.keyCode;
    if(keycode==13 || (e.target||e.srcElement).value==''){ 
    var http;  // The variable that makes Ajax possible! 

    try{ 
        // Opera 8.0+, Firefox, Safari 
        http = new XMLHttpRequest(); 
    } catch (e){ 
        // Internet Explorer Browsers 
        try{ 
            http = new ActiveXObject("Msxml2.XMLHTTP"); 
        } catch (e) { 
            try{ 
                http = new ActiveXObject("Microsoft.XMLHTTP"); 
            } catch (e){ 
                // Something went wrong 
                alert("Your browser broke!"); 
                return false; 
            } 
        }
    }

    var url = "getagentids.php?param=";
                var idValue = document.getElementById("agid").value;
                var myRandom = parseInt(Math.random()*99999999);  // cache buster
                http.open("GET", "getagentids.php?param=" + escape(idValue) + "&rand=" + myRandom, true);
                http.onreadystatechange = handleHttpResponse;
                http.send(null);
         function handleHttpResponse() {
                    if (http.readyState == 4) {
                        results = http.responseText.split(",");
                        document.getElementById('agfn').value = results[0];
                        document.getElementById('agsal').value = results[1];
                        document.getElementById('agtel').value = results[2];
                        document.getElementById('agid').value = results[3];
                    }
                } 
    }
}

</script> 

       <form>
            <table>
                <tr>
                    <td>Contact ID:</td>
                    <td><input id="agid" type="text"
                               name="contactid" onkeyup="ajaxFunction(event)"></td>
                </tr>
                <tr>
                    <td>Tel Number:</td>
                    <td><input id="agtel" type="text"
                               name="contacttel"></td>
                </tr>
                <tr>
                    <td>Name:</td>
                    <td><input id="agfn" type="text"
                               name="contactfullname"></td>
                </tr>
                <tr>
                    <td>Salutation:</td>
                    <td><input id="agsal" type="text"
                               name="contactsalutation"></td>
                </tr>
                <tr>
                    <td><input type="reset" value="Clear"></td>
                    <td></td>
                </tr>
            </table>
        </form>

    </body> 
</html> 

Upvotes: 1

Views: 613

Answers (2)

Akhilesh B Chandran
Akhilesh B Chandran

Reputation: 6608

Here is how I would do the basic validation using jQuery.

$(document).ready(function(){
    $('#contact').keypress(function(e){ //when user presses a key in that Input Box
      var code = (e.keyCode ? e.keyCode : e.which);
      if(code == 13) // check if it is Enter Key
      {
        if($(this).val().trim().length == 0) // check if it is empty
            alert("Error: Shouldn't be empty !");
        else
        {
            // You are good to go here
        }
      }
    });
});​

HTML:

<input id="contact" name="contact" value="" />​

If you wish to test it live, goto: http://jsfiddle.net/NFSTL/

I binded the KeyPress event to that InputBox.

Hope it helps. :)


EDIT

Without using jQuery:

function ajaxFunction(e){
    var code;
    if (!e) var e = window.event;
    if (e.keyCode) code = e.keyCode;
    else if (e.which) code = e.which;

    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
        targ = targ.parentNode;

    if(code==13)
    {
        if(targ.value.trim().length == 0)
            alert("Error: This shouldn't be empty!");
        else
        {
            //do the sending and receiving of data here...
        }
    }
}​

HTML:

<input id="agid" type="text" name="contactid" onkeyup="ajaxFunction(event)" />​

For live testing: http://jsfiddle.net/SYf4C/

Here's an excellent tutorial I used: quirksmode.org/js/events_properties

I would say that, jQuery makes life easier. :) Because it is a JavaScript library composed to work in almost all browsers.

Upvotes: 2

Rithu
Rithu

Reputation: 1289

Main page Coding:

 $('.vote').click(function() {
        var valueid=$(this).attr("alt");
        $.ajax({
            type: "POST",
            url: "voteajax.php",
            data: "votebtn="+valueid+""
        }).done(function( msg ) {
            var received_data=msg.trim();
            if(received_data=='0')
            {
                alert('Please sign in to vote!');
            }
            else
            {
                alert('received data'+received_data);
                gg2=received_data.split("/");
                var x=gg2[0];
                var no_of_vote=gg2[1];
                $('#totalnoofvotespan').html(no_of_vote);
                window.location='<?php echo $_SERVER['REQUEST_URI']; ?>';
            }
        });


//Ajax Page Coding


    $poll_choice = $_POST['votebtn'];
    $userid=$_SESSION['userid'];
    $date=date('Y-m-d h:i:s');
    $ex=explode(",",$poll_choice);
    $pollid=$ex[0];
    $choiceid=$ex[1];
    if($userid=="")
    {   
        echo "0";   
    }
    else
    {
        ..// Your coding 
        echo $choiceid."/".$numofvote;   // Echo the identifier and access this identifier in main page for message notification
    }

The first one is the main page coding In the above coding i passed argument to ajax page. In ajax page it gets the values from the main page and if it is not valid it echo the identify code. Using that code we can say "It is not a valid one". Like this u have to try. I think this may helps you

Upvotes: 1

Related Questions