JQuery Validation script not executing

Question

saurabh2007 -3 Newbie Poster

11 Years Ago

I am working with JQuery Validation plugin and am having trouble validating the form.
The following is a live version of my form: http://demcode.3eeweb.com/

The following is the code for my index.php file:

<!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" xml:lang="en-US" lang="en-US">
<head>
<title>DemCodeLines</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="http://demcode.3eeweb.com/jquery.validate.js"></script>
<link type="text/css" rel="stylesheet" href="http://demcode.3eeweb.com/jquery.validate.css" />
<link type="text/css" rel="stylesheet" href="http://demcode.3eeweb.com/main.css" />
<script type="text/javascript">
$(document).ready(function(){
   $("#signUpHome").validate({
      rules: {
        signUpname: {
            required: true
        },
        signUppassword: {
            required: true
        },
        birthMonth: {
            required: true
        },
        birthDate: {
            required: true
        },
        birthMonth: {
            required: true
        },
        signUpemail: {
            required: true,
            email: true,
            remote: {
                url: "/validate.php",
                type: "POST",
                data: {
                    signUpemail: function(){ console.log("DONE!"); return $('#signUpemail').val(); }
                }
            }
         }
      },
      messages: {
         signUpemail: "Required Field"
      }
   });
});
</script>
</script>
</head>
<body>

email in the database: test7@gmail.com

        <form id="signUpHome" method="POST" action="">
            <label id="frontPageSignUpName">Full Name:
                <input class="text fancyText frontPageSignUpComponent" id="signUpname" name="signUpname" type="text">
            </label><br>
            <label id="frontPageSignUpEmail">Email:
                <input class="text fancyText frontPageSignUpComponent" id="signUpemail" name="signUpemail" type="text">
            </label><br>
            <label id="frontPageSignUpPassword">Password:
                <input class="text fancyText frontPageSignUpComponent" name="signUppassword" id="signUppassword" type="password">
            </label><br>
            <label id="frontPageSignUpBirthdate">Birthday:</label>
            <select name="DateOfBirth_Month" id="birthMonth" style="vertical-align: bottom;margin-top:5px;">
                <option value="0">Month</option>
                <option value="1">January</option><option value="2">February</option><option value="3">March</option><option value="4">April</option>
                <option value="5">May</option><option value="6">June</option><option value="7">July</option><option value="8">August</option>
                <option value="9">September</option><option value="10">October</option><option value="11">November</option><option value="12">December</option>
            </select>
            <select name="DateOfBirth_Day" id="birthDate">
                <option value="0">Day</option>
                <option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option>
                <option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option>
                <option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option>
                <option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option>
                <option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option>
                <option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option>
                <option value="31">31</option>
            </select>
            <select name="DateOfBirth_Year" style="margin-right:8px" id="birthYear">
                <option value="0">Year</option>
                <option value="2004">2004</option><option value="2003">2003</option><option value="2002">2002</option><option value="2001">2001</option>
                <option value="2000">2000</option><option value="1999">1999</option><option value="1998">1998</option><option value="1997">1997</option>
                <option value="1996">1996</option><option value="1995">1995</option><option value="1994">1994</option><option value="1993">1993</option>
                <option value="1992">1992</option><option value="1991">1991</option><option value="1990">1990</option><option value="1989">1989</option>
                <option value="1988">1988</option><option value="1987">1987</option><option value="1986">1986</option><option value="1985">1985</option>
                <option value="1984">1984</option><option value="1983">1983</option><option value="1982">1982</option><option value="1981">1981</option>
                <option value="1980">1980</option><option value="1979">1979</option><option value="1978">1978</option><option value="1977">1977</option>
                <option value="1976">1976</option><option value="1975">1975</option><option value="1974">1974</option><option value="1973">1973</option>
                <option value="1972">1972</option><option value="1971">1971</option><option value="1970">1970</option><option value="1969">1969</option>
                <option value="1968">1968</option><option value="1967">1967</option><option value="1966">1966</option><option value="1965">1965</option>
                <option value="1964">1964</option><option value="1963">1963</option><option value="1962">1962</option><option value="1961">1961</option>
                <option value="1960">1960</option><option value="1959">1959</option><option value="1958">1958</option><option value="1957">1957</option>
                <option value="1956">1956</option><option value="1955">1955</option><option value="1954">1954</option><option value="1953">1953</option>
                <option value="1952">1952</option><option value="1951">1951</option><option value="1950">1950</option><option value="1949">1949</option>
                <option value="1948">1948</option><option value="1947">1947</option><option value="1946">1946</option><option value="1945">1945</option>
                <option value="1944">1944</option><option value="1943">1943</option><option value="1942">1942</option><option value="1941">1941</option>
                <option value="1940">1940</option><option value="1939">1939</option><option value="1938">1938</option><option value="1937">1937</option>
                <option value="1936">1936</option><option value="1935">1935</option><option value="1934">1934</option><option value="1933">1933</option>
                <option value="1932">1932</option><option value="1931">1931</option><option value="1930">1930</option><option value="1929">1929</option>
                <option value="1928">1928</option><option value="1927">1927</option><option value="1926">1926</option><option value="1925">1925</option>
                <option value="1924">1924</option><option value="1923">1923</option><option value="1922">1922</option><option value="1921">1921</option>
                <option value="1920">1920</option><option value="1919">1919</option><option value="1918">1918</option><option value="1917">1917</option>
                <option value="1916">1916</option><option value="1915">1915</option><option value="1914">1914</option><option value="1913">1913</option>
                <option value="1912">1912</option><option value="1911">1911</option><option value="1910">1910</option><option value="1909">1909</option>
                <option value="1908">1908</option><option value="1907">1907</option><option value="1906">1906</option><option value="1905">1905</option>
                <option value="1904">1904</option><option value="1903">1903</option><option value="1902">1902</option><option value="1901">1901</option>
                <option value="1900">1900</option>
            </select></label><br><br>
            <input type="submit" name="signUpSub" id="signUpSub" value="Sign Up">
        </form>

</body>
</html>

The following is the code for my validate.php file:

<?php
$db = new PDO('mysql:host=mysql.2freehosting.com;dbname=...', '...', '...');
$db->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
$emailInput = $_POST['signUpEmailName'];
if ($emailInput!="") {
    $result = $db->prepare('SELECT * FROM People WHERE email=?');
    $result->execute(array($emailInput));
}
echo (count($result->fetchAll()) != 0);
?>

The submit button works regardless of whether the data entered in the form is valid or not. The validation is not executing at all. More over, the validation for whether the email exists in the DB or not isn't working either.

What am I doing wrong?

javascript jquery

3 Contributors
2 Replies
301 Views
2 Days Discussion Span
Latest Post 11 Years Ago Latest Post by davidjennings

iamthwee

11 Years Ago

Have you read jquery validate() docs properly?

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

davidjennings 0 Junior Poster in Training · Answer 1 · 2013-06-13T22:52:15+00:00

Hi I have used a simular script recently and the form input requires required
ie input class="url input-wide" id="url" type="text" name = "url" value="<?php echo $url ?>" required />
this just a sample that worked for me
Also it would help if your link for the demo worked and ppeople could see what was going on.

Hope it helps
D

<script>
    $.validator.setDefaults({
        submitHandler: function() { alert("submitted!"); }
    });

        // validate customised_partners form on keyup and submit
        $("#customised_partners").validate({
            rules: {
                centre_no: "required",
                partner_name: "required",
                url:  {
                    required: true,
                    minlength: 2
                },


                messages: {
                    centre_no: "Please enter centre no",
                    partner_name: "Please enter partner name",
                    url: {
                        required: "Please enter a valid web address",
                        minlength: "Your web address must consist of at least 2 characters"
                    },

                }
            });

    });
</script>
<h1>Welcome</h1>
<div id="content">
    <div class="form-container">
        <div>Required <span class="mandatory">*</span></div>
        <div style="margin-right:100px; float: right; font-size: 20px;"> <a href='/customised_partners/'>Back </a></div>
        <form class="cmxform" action="/customised_partners/add/" method='POST' id="customised_partners">
            <!--<div>
                <input class="partner_id input-wide" type="hidden" id="partner_id" name ="partner_id" value="" />
            </div>-->
            <div>

            <div>
                <label for="url"><span class="mandatory">*</span> Partner Web Address: </label>
                <input class="url input-wide" id="url" type="text"  name = "url" value="<?php echo $url ?>" required />