CLient side validation message does not display when javascript to disable submit button is added

Question

I have a simple form with 2 dropdown fields and a submit button in my MVC application. I have enabled client side validation and it works fine. I have now added a javascript to disable the submit button to prevent the form being submitted twice. For some unknown reason the client validation message does not display when I add this script.

This is my form:

    @using (Html.BeginForm("Recycle", "GetList", FormMethod.Post, new { id = "myForm" }))
    {
        <!-- Server list -->
        <div>
            <span>Site type:&nbsp;</span>
            @Html.DropDownListFor(m => m.uInputS, new List<SelectListItem>
            {
                new SelectListItem {Text = "text", Value = "value" },
                new SelectListItem {Text = "text", Value = "value" }
            }, "Select site type")
            @Html.ValidationMessageFor(m => m.uInputS, "", new { @class = "error" })
        </div>
        <!-- Application list -->
        <br />
        <div>
            <span>Application:&nbsp;</span>
            @Html.DropDownListFor(m => m.uInputA, new SelectList(string.Empty, "Value"))
            @Html.ValidationMessageFor(m => m.uInputA, "", new { @class = "error" })
        </div>
        <br />
        <!-- Submit-->
        <div>
            <input id="Submit1" type="submit" value="Submit" onclick="return FreezeSubmit();" />
        </div>
    }

Below is the jquery I used to disable the submit button.

<script>
 function FreezeSubmit() {
 var s = $("#uInputS").val();
 var a = $("#uInputA").val();
 if ((s && a)) {
    $('#myForm').submit();
    $('#Submit1').prop('disabled', true);
    return true;
 }
 else {
    $('#Submit1').prop('disabled', false);
    return false;
 }
}
</script>

This is my Model:

    public class GetList
    {
      [Required(ErrorMessage = "Please select site type")]
      public string uInputS { get; set; }

      [Required(ErrorMessage = "Please select application name")]
      public string uInputA { get; set; }
    }

I am very new to programming and I am not able to figure out why the client validation message fails to display because I added some javascript. Any help is appreciated. Thanks!

Hien Nguyen · Accepted Answer · 2019-06-19 17:24:01Z

0

Remove onclick in

<input id="Submit1" type="submit" value="Submit" onclick="return FreezeSubmit();" />

change to

<input id="Submit1" type="submit" value="Submit" />

and you need change your script to

<script>
 $(document).ready(function(){
 checkEmpty()
 })

 $('input').change(function() {
     checkEmpty();
 });

 function checkEmpty(){

  var s = $("#uInputS").val();
 var a = $("#uInputA").val();
 if ((s && a)) {

    $('#Submit1').prop('disabled', true);

 }
 else {
    $('#Submit1').prop('disabled', false);

 }
 }
</script>

answered Jun 19, 2019 at 17:24

Hien Nguyen

19k7 gold badges57 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Satish Patil · Accepted Answer · 2019-06-23 07:49:47Z

0

disable the button when submit handler is called, see jquery api here

  $( "#your_form_id" ).submit(function(event) { // Handler for .submit() called.
     $('#Submit1').prop('disabled', true);
 });

answered Jun 23, 2019 at 7:49

Satish Patil

4586 silver badges15 bronze badges

Collectives™ on Stack Overflow

CLient side validation message does not display when javascript to disable submit button is added

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related