提交表单后,表单验证只是在成功提交表单后跳过成功

时间:2016-05-16 06:32:11

标签: javascript jquery ajax forms

我正在使用formData提交表单的数据,因为我的from中有一些文件。有一次,当我提交表单时,只需在成功提交表单后跳过成功。 它发生一次,我试图使用Html 5 ajax验证我的表格。 但是,当我尝试使用自定义验证时,它的工作正常。

Js代码是: -

 function propertyDetails() {
    $('#submitPropertyDetails').click(function () {
        if (window.FormData !== undefined) {
            if (isValidPropertyDetails() && getPropertyFormData() != null) {
                showLoading();
                $.ajax({
                    url: '/Member/PropertyDetails',
                    type: "POST",
                    contentType: false,
                    processData: false,
                    data: getPropertyFormData(),
                    success: function (result) {
                        setAmentiesDetails(result);
                        hideLoading($('#propertyDetails')[0]);
                    },
                    error: function (jqXhr) {
                        alert(jqXhr.statusText);
                        $errors = jqXhr.responseJSON; 
                        hideLoading($('#propertyDetails')[0]);
                    }
                });
            }
        }
        else {
            alert("FormData is not supported.");
        }
    });
};
   function getPropertyFormData() {
        // Create FormData object 
       var form = $('#propertyDetails')[0];
        var officeTypeDetails = new FormData(form);
        return officeTypeDetails;
   };
   var isValidPropertyDetails = function () {
       if ($('#propertyDetails')[0].checkValidity()) {
           return true;
       }
       else
       return false;
   };

我的Html代码是: -

<form method="post" id="propertyDetails">
    <div class="col-md-8 slid-spaceDetailsMiddleColumn">

        <div class="form-group">
            <div class="col-md-12">
                <div class="col-md-3">
                    <label class="textColor">Looking for</label>
                </div>
                <div class="col-md-3">
                    <div class="col-md-7">
                        <input class="form-control" data-val="true" data-val-number="The field PropertySubTypeId must be a number." id="PropertySubTypeId" name="PropertySubTypeId" required="" type="radio" value="2">
                    </div>
                    <div class="col-md-5">
                        <label class="textColor">Dental</label>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="col-md-7">
                        <input class="form-control" id="PropertySubTypeId" name="PropertySubTypeId" required="" type="radio" value="1">
                    </div>
                    <div class="col-md-5">
                        <label class="textColor">Medical</label>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="col-md-7">
                        <input class="form-control" id="PropertySubTypeId" name="PropertySubTypeId" required="" type="radio" value="3">
                    </div>
                    <div class="col-md-5">
                        <label class="textColor">Genral</label>
                    </div>
                </div>
            </div>
        </div>



        <div class="form-group">
            <div class="col-md-4">
                <br>
                <input class="form-control" data-val="true" data-val-number="The field RentableSquareFeet must be a number." id="RentableSquareFeet" name="RentableSquareFeet" placeholder="Rentable Square Feet" required="" type="text" value="">
                <br>
            </div>
            <div class="col-md-4">
                <br>
                <input class="form-control" data-val="true" data-val-number="The field UsableSquareFeet must be a number." id="UsableSquareFeet" name="UsableSquareFeet" placeholder="Usable Square Feet" required="" type="text" value="">
                <br>
            </div>
            <div class="col-md-4">
                <br>
                <input class="form-control" data-val="true" data-val-date="The field AvilableDate must be a date." id="AvilableDate" name="AvilableDate" placeholder="Avilable Date" required="" type="text" value="">
                <br>
            </div>
        </div>






        <div class="col-lg-10">
            <div class="form-group">
                <div class="col-md-offset-12">
                    <button class="btn btn-info" id="submitPropertyDetails" type="submit" value="Submit">
                        Continue
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4 slid-sideMediaSmallColumn">
        <br>
        <video width="100%" height="160px" controls="" autoplay="autoplay">
            <source src="/UploadVideo/hubToBidVideo.png" type="video/mp4">
        </video>
        <div class="form-group">
            <div class="col-md-12">
                <input type="file" id="Video" name="Video" class="form-control">
            </div>
        </div>
    </div>
</form>

0 个答案:

没有答案