HTML Form Validation Logic in JavaScript or jQuery

Question

I have a form for which I should write validation logic.

Let's say there's an input field like this.

<div class="group1"><label>Product code</label> <input id="code" name=""code" type="text" class="control1"></div>

If I want to make it a required field how do I write the logic?

I don't have access to the CSS files. But there's an input like this which I can use which has a red outline.

<div class="group1 row has-error">
   <div><input type="text" class="control1"></div>
</div>

I have to give the code in JavaScript or jQuery.

zmag · Accepted Answer · 2021-06-04 03:07:43Z

1

Get an element and set true on required property.

const input1 = document.getElementById('code');
input1.required = true;

const input2 = document.querySelector('div.group1>div>input.control1');
input2.required = true;

<form>
  <div class="group1"><label>Product code</label>
    <input id="code" name="code" type="text" class="control1">
  </div>
  <div class="group1 row has-error">
    <div>
      <input type="text" class="control1">
    </div>
  </div>
  <input type="submit">
</form>

edited Jun 4, 2021 at 3:07

answered Jun 4, 2021 at 3:00

zmag

8,27112 gold badges39 silver badges47 bronze badges

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

Comments

AdityaDees · Accepted Answer · 2021-06-04 04:48:11Z

I think this is what you need

$("#formSubmit").submit(function(e) {
    e.preventDefault();
    var error_text = "<div class='text-danger error_val'>Cannot be empty</div>"
    var data = $("#formSubmit").serializeArray();
    var allInputs = $("#formSubmit input");
    for(var i=0; i<data.length; i++){
        if(data[i].value.length == 0){
            $(".group1").addClass('has-error');
            var errorDiv = $(allInputs)[i].closest('.has-error');
            $(error_text).insertAfter( errorDiv );
        }
    }
});

.has-error input{
 border: 1px solid #f00; 
}

.text-danger{
color:#f00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="formSubmit">
    <div class="group1 row">
        <label>Product code</label>
        <input id="code" name="code" type="text" class="control1" >
    </div>
    <button type="submit" id="submitButton">Save</button>
</form>

Ali Amini · Accepted Answer · 2021-10-02 06:27:06Z

I know it`s too late but you can use these functions to make an input required/optional

function makeFieldRequired(element, elementName) {
  let jqueryObj = $(element);
  jqueryObj.attr('title', `${elementName} is required`);
  jqueryObj.attr('required', 'true');

  if (jqueryObj.closest("form").length)
    refreshFormValidtion(jqueryObj.closest("form"));
}

function makeFieldOptional(element) {
  let jqueryObj = $(element);
  jqueryObj.removeAttr('required');
  jqueryObj.removeAttr('title');

  if (jqueryObj.closest("form").length)
    refreshFormValidtion(jqueryObj.closest("form"));
}

function refreshFormValidtion(form) {
  $(form).removeData("validator").removeData("unobtrusiveValidation");
  $.validator.unobtrusive.parse($(form));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Collectives™ on Stack Overflow

HTML Form Validation Logic in JavaScript or jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related