How to validate a form's input from ajax page using jquery

后端未结

关注

 2  1535

There are two inputs in my form. The first input can be validated before an ajax function. The second input can\'t be validated. The second input comes from a page using ajax an

相关标签:

2条回答

一整个雨季

2021-01-26 04:48

There's a few ways you can do this, however because I am on my phone I can't give you a detailed example.

What I recommend for you to look into is sending the AJAX request as JSON data to your PHP file, you can then validate the JSON data within the PHP file and return a response to the front end accordingly.

Within the PHP file you can return any value as a response, meaning that if you echo "success" or "true", you can see whether the data is what you are looking to receive from the user.

I would highly recommend doing as much validation possible in the back end. It is a good habit to get in to as anything can be manipulated on the front end of a website.

0 讨论(0)
发布评论:

提交评论
- 加载中...

暖寄归人

2021-01-26 04:48

This code works well. i have solved myself.

<html>
      <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
          $(document).ready(function(){
            $("#form").submit(function(){  

              if ($('#Name1').val().length<3) {
                alert ("please enter your first names");
                $('#Name1').focus();
                return false;
              }

              if ($('#hidden').val().length<3) {
                  $.ajax({
                    url: "result.php",
                    method: "GET" // Either get or post
                        }).done(function(response) {
                        var splitted = response.split("|"); // RESULT
                            $("#Div1").html(splitted[0]); // The first name
                            $("#Div2").html(splitted[1]); // The first name

                        });
                    //alert ("please verify");
                     return false;
                    }

                if ($('#Name2').val().length<3) {
                    alert ("please enter your second names");
                    $('#Name2').focus();
                     return false;
                }


            });
          });
        </script>
      </head>
      <body>
        <form id="form" action="Page.php">
          <div style="float:left;">
            <b>Name1:</b>
          </div>
          <input id="Name1" type="text">
          <br><br><br><br>
          <div style="clear:both;">
            <div style="float:left;">
              <b>Name2:</b>
            </div>
            <div id="Div1" style="float:left;">
              <input id="hidden" type="hidden">
            </div>
            <br><br><br>
            <div style="clear:both;">
              <div id="Div2">
                <button>First Event</button>
              </div>
            </div>
          </div>
        </form>
      </body>
    </html>

result.php

<input type="hidden" id="hidden" value="something"> <input type="text" id="Name2"> | <input id="button" type="submit" value="Second Event">

0 讨论(0)