CODEWITHSUNDEEP
javascriptjqueryajaxhtml
lolo
lolo

Reputation: 11

Validation and ajax one of these not working

After the validation code, I wrote some ajax code, but when I write the onclick="return chk()" in field input submit, then the validation code doesn't work anymore, and when I delete it the validation code is working but the ajax doesn't, so what can the issue be ?????????????

ajax and jquery code

$(document).ready(function(e) {

 $.validator.addMethod("alphabet", function(value, element) {
        return this.optional(element) || /^[a-zA-Z ]*$/.test(value);
    });
  $("#registration").validate({

    rules: {

      name: {
                    required: true,
                    minlength : 3,
                    alphabet: true,
      },  

      vorname: {
                    required: true,
                    minlength : 3,
                    alphabet: true,


      },  

      email: {
                    required: true,
                    email: true,
      },

       url: {
                    url: true,
      },

       image:{
                    required:true,
                    accept:"png",
                }
    },
    messages: {

                     name:{
                        required:"Name ist benötigen",
                        minlength :"Name muss mendisten 3 Buchstaben",

                    },

                    vorname:{
                        required:" Vorname ist benötigen",
                        minlength :"Name muss mendisten 3 Buchstaben",

                    },
                    email:{
                       required :" Email ist benötigen",
                       email :" Email muss"
                    },
                    Url:" URL muss benötigen",
                    image:"Image muss nur PNG sein",



    },

    submitHandler: function(form) {
      form.submit();
      alert ('Vielen Danke Für Ihre Anmeldung');
    }
  });
});

function chk(){

                        var name = document.getElementById('name').value;
                        var vorname = document.getElementById('vorname').value;
                        var email = document.getElementById('email').value;
                        var url = document.getElementById('url').value;
                        var image = document.getElementById('image').value;

                        var dataString='name='+ name + '&vorname='+vorname+ '&email='+email+ '&url='+url+ '&image='+image;
                        $.ajax({
                            type:"post",
                            url:"mainphp.php",
                            data:dataString,
                            cashe:false,
                            success:function(info){
                                $('#msg').html(info);
                            }

                        })
                        return false; 
                    }

HTML code

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="main.css">
                <script src="http://code.jquery.com/jquery-1.9.1.js"" ></script> 
                <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>
                <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/additional-methods.js"></script>
                <script language="javascript" type="text/javascript" src="javascript.js"></script>


    </head>
    <body>          
        <form class="form" name="registration" id="registration" action="" method="post" enctype="multipart/form-data" >
            <label for="name">Name</label>
            <input type="text" name="name" id="name" value="">
            <br><br>
            <label for="vorname">Vorame</label>
            <input type="text" name="vorname" id="vorname" value="">
            <br><br>
            <label for="email">Email</label>
            <input type="text" name="email"  id="email" value="">
            <br><br>
            <label for="name">URL</label>
            <input type="text" name="url" id="url" value="">
            <br><br>
            <input type="file" name="image" id="image" >
            <br><br>
            <input type="submit" value="Submit" onclick="return chk()" >
        </form>
            <p id="msg"></p>  
    </body>
</html>

Upvotes: 0

Views: 64

Answers (2)

Alok Mali
Alok Mali

Reputation: 2881

You don't need to call a function on onClick to send data at the server, You can put your code in submitHandler. The advantage of it is that if the form is invalid it will don't send any request (post data) to the server.

  <!DOCTYPE >
    <html>
      <head>
        <meta charset="UTF-8" />
        <link rel="stylesheet" href="main.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/additional-methods.js"></script>
        <script
          language="javascript"
          type="text/javascript"
          src="javascript.js"
        ></script>
      </head>
      <body>
        <form
          class="form"
          name="registration"
          id="registration"
          action=""
          method="post"
          enctype="multipart/form-data"
        >
          <label for="name">Name</label>
          <input type="text" name="name" id="name" value="" />
          <br /><br />
          <label for="vorname">Vorame</label>
          <input type="text" name="vorname" id="vorname" value="" />
          <br /><br />
          <label for="email">Email</label>
          <input type="text" name="email" id="email" value="" />
          <br /><br />
          <label for="name">URL</label>
          <input type="text" name="url" id="url" value="" />
          <br /><br />
          <input type="file" name="image" id="image" />
          <br /><br />
          <input type="submit" value="Submit" />
        </form>
        <p id="msg"></p>
      </body>
      <script>
        $(document).ready(function(e) {
          $.validator.addMethod("alphabet", function(value, element) {
            return this.optional(element) || /^[a-zA-Z ]*$/.test(value);
          });
          $("#registration").validate({
            rules: {
              name: {
                required: true,
                minlength: 3,
                alphabet: true
              },

              vorname: {
                required: true,
                minlength: 3,
                alphabet: true
              },

              email: {
                required: true,
                email: true
              },

              url: {
                url: true
              },

              image: {
                required: true,
                accept: "png"
              }
            },
            messages: {
              name: {
                required: "Name ist benötigen",
                minlength: "Name muss mendisten 3 Buchstaben"
              },

              vorname: {
                required: " Vorname ist benötigen",
                minlength: "Name muss mendisten 3 Buchstaben"
              },
              email: {
                required: " Email ist benötigen",
                email: " Email muss"
              },
              Url: " URL muss benötigen",
              image: "Image muss nur PNG sein"
            },

            submitHandler: function(form) {
              var name = document.getElementById("name").value;
              var vorname = document.getElementById("vorname").value;
              var email = document.getElementById("email").value;
              var url = document.getElementById("url").value;
              var image = document.getElementById("image").value;

              var dataString =
                "name=" +
                name +
                "&vorname=" +
                vorname +
                "&email=" +
                email +
                "&url=" +
                url +
                "&image=" +
                image;
              $.ajax({
                type: "post",
                url: "mainphp.php",
                data: dataString,
                cashe: false,
                success: function(info) {
                  $("#msg").html(info);
                }
              });
              //alert("Vielen Danke Für Ihre Anmeldung");
            }
          });
        });
      </script>
    </html>

Upvotes: 0

Jeeva
Jeeva

Reputation: 642

Call the chk() function directly like below

$.validator.addMethod("alphabet", function(value, element) {
        return this.optional(element) || /^[a-zA-Z ]*$/.test(value);
    });
  $("#registration").validate({

    rules: {

      name: {
                    required: true,
                    minlength : 3,
                    alphabet: true,
      },  

      vorname: {
                    required: true,
                    minlength : 3,
                    alphabet: true,


      },  

      email: {
                    required: true,
                    email: true,
      },

       url: {
                    url: true,
      },

       image:{
                    required:true,
                    accept:"png",
                }
    },
    messages: {

                     name:{
                        required:"Name ist benötigen",
                        minlength :"Name muss mendisten 3 Buchstaben",

                    },

                    vorname:{
                        required:" Vorname ist benötigen",
                        minlength :"Name muss mendisten 3 Buchstaben",

                    },
                    email:{
                       required :" Email ist benötigen",
                       email :" Email muss"
                    },
                    Url:" URL muss benötigen",
                    image:"Image muss nur PNG sein",



    },

    submitHandler: function(form) {
      formData = new FormData(form);
      chk(form);
      return false;
      alert ('Vielen Danke Für Ihre Anmeldung');
    }

  });
});

Upvotes: 1

Related Questions