remove required property from input field on form submit

Question

Model:

[Display(Name = "City"]
[Required]
[RegularExpression(@"^(?!\d$).*$"]
[StringLength(20,MinimumLength = 2]
public string City { get; set; }

Form:

@Html.LabelFor(x => x.City, new { @class = "control-label" })
@Html.TextBoxFor(x => x.City, new {id="city" })

Script:

<script>
  $(document).ready(function () {   
    $("#identificationForm").submit(function (e) {
      var required=document.getElementById("city").required;
      console.log(required);
      // e.preventDefault();
     });
  });
</script>

I want to remove required property if some condition is met.Unable to do this this way.How can i achieve this?

With Jquery: $("#city").removeAttr("required"); or use document.getElementById("city").removeAttribute('required'); — kevhann80, Aug 07 '13 at 19:18
Are you using JqueyVal? If yes, removing the required isn't the only thing! — Fals, Aug 07 '13 at 20:32
possible duplicate of [How to set HTML5 required attribute in Javascript?](http://stackoverflow.com/questions/18770369/how-to-set-html5-required-attribute-in-javascript) — , Apr 24 '14 at 23:03

Denys Séguret · Accepted Answer · 2013-08-07T19:28:28.747

58

JavaScript is case sensitive.

Use

document.getElementById("city").required = false;

Demonstration

Be careful that your code can't work as you try to access the element before it exists. Put your script after the element if you don't execute the code on an event :

<input type="text" id="city" required>
<script>
if(somecondition is true){
    document.getElementById("city").required = false;
}
</script>

Note also that you can't change this in a submit function and expect your form to be submitted because it's too late : this event handler won't be called if the required field is not filled !

edited Aug 07 '13 at 19:28

answered Aug 07 '13 at 19:17

Denys Séguret

372,613
87
782
758

1

Form is still not submitting and i am doing this in form submit function – user2137186 Aug 07 '13 at 19:27
@user2137186 I've edited my answer to point another problem. It may be relevant or not, depending on how far the code you show is from what you really have. – Denys Séguret Aug 07 '13 at 19:29
I am call that script function on form submit function – user2137186 Aug 07 '13 at 19:30
But is your submit function called ? If required is true and the field empty, then it shouldn't be called. You must change it elsewhere, from example by binding to a button click event. – Denys Séguret Aug 07 '13 at 19:33
1

@dystroy Given that he's using MVC4, maybe exists a JqueryVal. So removing the required isn't enougth. – Fals Aug 07 '13 at 20:33
This does normally work but not with the data annotations. – tdahman1325 Mar 03 '23 at 14:42

score 15 · Answer 2 · answered Aug 07 '13 at 19:20

15

You can use:

document.getElementById("city").removeAttribute("required");

or with jQuery

$('#city').removeAttr('required')

answered Aug 07 '13 at 19:20

j08691

204,283
31
260
272

1

Form is still not submitting and i am doing this in form submit function – user2137186 Aug 07 '13 at 19:28
well i am using .net mvc4 ...so this should not be posted here – user2137186 Aug 07 '13 at 19:29
1

@user2137186 you can post, just! We will reflag it for mvc as well! – Fals Aug 07 '13 at 19:32

score 5 · Answer 3 · answered Aug 07 '13 at 19:19

5

You shoud do this:

if(somecondition is true)
{
  var city = document.getElementById("city");
  city.removeAttribute('required');
}

answered Aug 07 '13 at 19:19

Fals

6,813
4
23
43

Form is still not submitting and i am doing this in form submit function – user2137186 Aug 07 '13 at 19:24
You should post the entire function. – Fals Aug 07 '13 at 19:26
what do you mean by that? – user2137186 Aug 07 '13 at 19:29
You should post the entire form, and the function, theres something else wrong! – Fals Aug 07 '13 at 19:31

score 1 · Answer 4 · edited Jul 26 '15 at 05:25

By the time the On Submit function is to remove the required attribute, the form would have already passed validation. The steps are first you have to disable validation then you will be able to submit the form with the required fields empty. Next remove the required attributes and finally manually invoke validation via $.validator.unubtrusive.parse(form) and this will now validate the form by invoking the other validation types such as string length and formatting, everything else except the required attributes. Check if form.valid() then submit() else do nothing.

score 1 · Answer 5 · answered Apr 15 '17 at 14:05

1

In php its very easy, this will not validate your form while submitting,

<input type="submit" onclick="return confirm('Are you sure?')" value="Abort Test" formnovalidate>

answered Apr 15 '17 at 14:05

Sarfaraz Ansari

119
1
8

score 0 · Answer 6 · answered Apr 29 '17 at 15:13

Not sure if anyone has figured out a better way to do this yet and it might not be the most efficient way to do it but you could use PHP to get this done. If the condition you are looking to meet is known before the page loads then you can have this:

<input type="text" id="city" 

<?php
     if (condition_is_met) {
          echo ">";
     } else {
          echo "required>";
     }
?>

score 0 · Answer 7 · answered Feb 01 '19 at 06:08

If you put your text fields in a form, it is possible to overwrite the required field with a special attribute called novalidate. This is the syntax: <form novalidate> .. </form>

Here is an example:

<form novalidate>
  Zip code: <input type="text" name="zipcode" pattern="[0-9]{5}" required><br/>

  <input type="submit">
</form>

The novalidate Attribute Here is a link with two live demos using novalidate attribute.

score 0 · Answer 8 · answered Jul 22 '19 at 10:55

0

Or in the moment that form is submitted you can disabled it if it's null:

if($("#City").val().trim().length == 0) $("#City").attr("disabled", true);

answered Jul 22 '19 at 10:55

Edison Neza

43
3

tdahman1325 · Answer 9 · 2023-03-03T17:17:28.260

This works for me with data annotations. Use the "rules" function.

$("#FileUpload").rules("remove", "required");

and to add:

$("#FileUpload").rules("add", "required");

UPDATE: This will fix frontend validation but backend validation still fails. To make the ModelState valid, I change the ValidationState of that input.

ModelState["FileUpload"].ValidationState = Microsoft.AspNetCore.Mvc.ModelBinding.ModelValidationState.Valid;

I do check to make sure that's the only error too:

if (ModelState["FileUpload"].Errors.Count == 1)
    if (ModelState["FileUpload"].Errors[0].ErrorMessage.Equals("The FileUpload field is required."))
        ModelState["FileUpload"].ValidationState = Microsoft.AspNetCore.Mvc.ModelBinding.ModelValidationState.Valid;

remove required property from input field on form submit

9 Answers9

Linked