CODEWITHSUNDEEP
asp.net-coretabsrazor-pagesremote-validation
Teena
Teena

Reputation: 165

Conditional remote validation in razor pages using data annotation

I have to validate a field based on another fields input. If Field A is not empty, then Field B should be filled out. Currently this form is inside a tab,so when i do the javascript validation it is navigating to the first tab. Here is my code for Model Class

    //--WorkpassType ---//
    //[Required(ErrorMessage = "Please Select WorkPass Type")]
    [Display(Name = "WorkPass Type"), StringLength(20)]
    public string WorkpassType { get; set; }

    //--Workpass Expiry Date ---//
    //[Required(ErrorMessage = "Please Select WorkPass Expiry Date")]
    [Display(Name = "WorkPass Expiry Date")]
    [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
    [DataType(DataType.Date)]
    public DateTime? WorkpassExpiryDate { get; set; }

Index.cshtml

    <form method="post" id="FormBiodata" enctype="multipart/form-data">
        <partial name="_BioData" />
        <div class="form-group row">
            <div class="col-sm-10" style="margin-left:800px;">
                <input type='submit' class='btn btn-success' value='Save' />
                <input type="submit" id="BtnSubmit" asp-page-handler="InsertBioData" style="display:none;" />
            </div>
        </div>
    </form>

Javascript Validation

     $('#FormBiodata').submit(function () {

        if ($('#DropDownWorkPassType').val()) {
            if ($('#WorkPassExpiryDate').val() == null) {
                $("#SpanWorkPassExpiryDate").html("Please Enter WorkPass Expiry Date");
                $('#myTab li:nth-child(@Model.currentTab) a').tab('show')
                return false;
            }
        }
        else {
            $("#BtnSubmit").click();
        }
    });

Any help would be appreciated.Thanks!

Upvotes: 0

Views: 239

Answers (1)

Yiyi You
Yiyi You

Reputation: 18159

Try to use e.preventDefault(); in form submit js:

 <form method="post" id="FormBiodata" enctype="multipart/form-data" asp-page-handler="InsertBioData">
        <partial name="_BioData" />
        <div class="form-group row">
            <div class="col-sm-10" style="margin-left:800px;">
                <input type='submit' class='btn btn-success' value='Save' />
            </div>
        </div>
    </form>

js:

$('#FormBiodata').submit(function (e) {
        e.preventDefault();
        if ($('#DropDownWorkPassType').val()) {
            if ($('#WorkPassExpiryDate').val() == null) {
                $("#SpanWorkPassExpiryDate").html("Please Enter WorkPass Expiry Date");
                
            }
        }
        else {
            this.submit();
        }
    });

Upvotes: 0

Related Questions