表单验证-jQuery表单验证不起作用

时间:2019-07-23 23:10:50

标签: jquery asp.net-core

我正在尝试验证我的asp.net核心剃刀页面,但是由于某种原因,它无法正常工作。使用JQuery

我尝试使用的代码如下。条件$(“#Add_Form”)。valid,如果为false,则集中在错误消息上

  if ($("#Add_Form").valid())
                ehi(data);


            else
                validator.focusInvalid();

            return false;

我想验证必填字段并关注错误 这是我的代码 谢谢

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Personals - xxxxx</title>


        <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css" />
        <link href="/lib/xxxxx/css/main.css" rel="stylesheet" />

        <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" crossorigin="anonymous"></script>



        <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
        <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>

        <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>



    <link rel="stylesheet" href="/css/site.css" />
</head>
<body>
    <header>

    </header>
    <div class="container"><div class="topnav text-center">
    <a class="active" href="#home">Home</a>

    <input type="text" placeholder="Search.."><button type="button" class="btn btn-primary btn-sm">Search</button> <div class="mr-6">  <a class="dept dropdown-item" href="#">

</a></div>
</div>


    <div id="cookieConsent" class="alert alert-info alert-dismissible fade show" role="alert">
        Use this space to summarize your privacy and cookie use policy. <a class="alert-link" href="/Home/Privacy">Learn More</a>.
        <button type="button" class="accept-policy close" data-dismiss="alert" aria-label="Close" data-cookie-string=".AspNet.Consent=yes; expires=Wed, 22 Jul 2020 21:52:50 GMT; path=/; secure">
            <span aria-hidden="true">Accept</span>
        </button>
    </div>


        <main role="main" class="pb-3">






    <div class="container">
        <div class="col-md-12"><div class="col-md-6"><h2>Personal Details</h2> </div><div class="col-md-6 text-right">Others here</div></div>
        <div class="row border border-info ">
            <div class="col-md-3"> 


<div class="Navigation_Accounts table-bordered">

     </div>
            <div class="col-md-1">
            </div>
            <div class="col-md-5 summary text-center" id="Wait">
                <div id="Wait2"> <br />  Please wait<br /><br /></div>
                <img src="/images/giphy.gif" />
            </div>
            <div class="col-md-5  " id="Main" style="display:none;">
                <form id="Add_Form" action="/Users/Address_Add" method="post">
                    <br /> 



                    <div class="form-group">
                        <label class="control-label" for="Username">Username</label>
                        <input required class="form-control" maxlength="15" type="text" data-val="true" data-val-length="The field Username must be a string with a minimum length of 6 and a maximum length of 50." data-val-length-max="50" data-val-length-min="6" data-val-required="Please enter your chosen Username" id="Username" name="Username" value="" />
                        <span class="text-danger field-validation-valid" data-valmsg-for="Username" data-valmsg-replace="true"></span>
                    </div>


                    <div class="form-group">
                        <label class="control-label" for="First_Name">First Name</label>
                        <input required class="form-control" maxlength="50" type="text" data-val="true" data-val-length="The field First_Name must be a string with a minimum length of 2 and a maximum length of 50." data-val-length-max="50" data-val-length-min="2" data-val-required="Please enter the first name" id="First_Name" name="First_Name" value="" />
                        <span class="text-danger field-validation-valid" data-valmsg-for="First_Name" data-valmsg-replace="true"></span>
                    </div>

                    <div class="form-group">
                        <label class="control-label" for="Last_Name">Last Name</label>
                        <input required class="form-control" maxlength="50" type="text" data-val="true" data-val-length="The field Last_Name must be a string with a minimum length of 2 and a maximum length of 50." data-val-length-max="50" data-val-length-min="2" data-val-required="Please enter the last name" id="Last_Name" name="Last_Name" value="" />
                        <span class="text-danger field-validation-valid" data-valmsg-for="Last_Name" data-valmsg-replace="true"></span>
                    </div>



                    <div class="form-group">
                        <label class="control-label" for="Mobile">Mobile</label>
                        <input required class="form-control" maxlength="15" type="tel" id="Mobile" name="Mobile" value="" />
                        <span class="text-danger field-validation-valid" data-valmsg-for="Mobile" data-valmsg-replace="true"></span>
                    </div>




                    <br />
                    <hr />
                    <br />
                    <div class="form-group">
                        <input type="submit" id="Add_Submit" value="Go !" class="btn btn-default" />
                    </div>
                    <br />
                    <hr />
                    <br />
                <input name="__RequestVerificationToken" type="hidden" value="CfDJ8IPMXGj67c9AsKAqp5ytxNhbHVg-ncNpnjgL-yPmL8t39U_yUEGKeAWKm99V2U-DRraopNiH4EGsmzAtOkfZt_ZQiH7nT-QsDfC7EnoRyBqvgflXMaZpXKotd6M18IXGneVRWm0SgF_tOwJZfuCABoo" /></form>
            </div>
            <div class="col-md-3"></div>
        </div>
    </div>
    <div class="row col-md-12">
    <div class="row col-md-12">
        With your online address manager, you can connect to your social media accounts <br />
        - Set birthday reminders<br />
        - Set Alarms<br />
        - Send presents to a virtual or physical address<br />
    </div>

    <div class="col-md-4 btn">
        <a href="/Address_Manager/Addresses">
            My Addresses<br />      <img src="/images/icons/Address_Home.png" /><br />
            Billing, Shipping and Home addresses
        </a>
    </div>
    <div class="col-md-4 btn">
        <a href="/Address_Manager/Add">
            My Contacts<br />

            <img src="/images/icons/Address_Virtual.png" /><br />

        </a>
        <a href="/Address_Manager/Email">Email Contacts </a> or      <a href="/Address_Manager/Mobile">Mobile Contacts</a>
    </div>

    <div class="col-md-4 btn">
        Organizer<br />
        <img src="/images/icons/Organizer.png" />
    </div>


</div>

        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2019 - xxxxx - <a href="/Home/Privacy">Privacy</a>
        </div>
    </footer>


        <script src="/lib/jquery/dist/jquery.js"></script>
        <script src="/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>


    <script src="/js/site.js?v=4q1jwFhaPaZgr8WAUSrux6hAuh0XDg9kPS3xIVq36I0"></script>



    <script>


        $(document).ready(function () {

            $('#Main').show();
            $('#Wait').hide();


            $('#Add_Submit').on("click", function (e) {
                e.preventDefault();

                var last_Name = $("#First_Name").val();
                var first_Name = $("#Last_Name").val();
                var mobile = $("#Mobile").val();
                var Username = $("#Username").val();



                var token = $('#Add_Form input[name="__RequestVerificationToken"]').val();


                var data = { __RequestVerificationToken: token, First_name: first_Name, Last_name: last_Name };




                 if ($("#Add_Form").valid())
                    ehi(data);


                else
                    validator.focusInvalid();

                return false;

            });










            function Dawn(data) {


                $.ajax({

                    type: "POST",
                    url: "Personal",
                    dataType: 'json',
                    data: data,

                    success: function (message) {


                        $('#Wait2').slideDown(90).show().text('<div class="Text-Center">Thank you <br/>Your Account has been successfully updated</div>');
                         // $('#giphy').hide():

                    },
                    error: function (message) {

                        $('#Wait2').slideDown(90).show().html('<div class="Text-Center">There was an error  - Please try again</div>');
                       // $('#giphy').hide():
                    }

                });
            };



        });
    </script>



</body>
</html>

0 个答案:

没有答案