How to add validation field in every input type or required fields

Question

Here is my JS.

 function addItem() {

          //Radio Button
        var tipo = document.getElementsByName("priority");
        for (var i = 0; i < tipo.length; i++) {
            if (tipo[i].checked)
                resultado = tipo[i].value;        
        }

        var inputFile =document.getElementById('inputFile').value;
        var title = document.getElementById('title').value;
        var userTitle = document.getElementById('userTitle').value;
        var description = document.getElementById('description').value;
        var department = document.getElementById('department').value;

    var data = {
        __metadata: { 'type': 'SP.Data.BUGSListListItem' },
        "Priority":resultado,
        "Title0":title,
        "Requester_x0020_Name":userTitle,
        "Description":description,
        "Department":department

    };

    addListItem("BUGSList",data).then(function(data){

         if (document.getElementById("inputFile").files.length === 0) {                  
                    window.location.assign('domain/Lists/BUGSList/AllItems.aspx'); 
           }       
           else
           {
               //File Upload
                var itemId =  data.d.ID;   
                var fileInput = $('#inputFile');
                var fileCount = fileInput[0].files.length;  
                var fileArray = [];

                for(var i=0;i<fileCount;i++)
                {
                    fileArray.push(fileInput[0].files[i]);
                }                             
                uploadFileSP("BUGSList", itemId, fileArray, fileCount);
           }
        });
    }
}

function addListItem(listName, data) {  

return $.ajax({
    url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('" + listName + "')/items",
    type: "POST",
    headers: {
        "accept": "application/json;odata=verbose",
        "X-RequestDigest": $("#__REQUESTDIGEST").val(),
        "content-Type": "application/json;odata=verbose"
    },
    data: JSON.stringify(data),
    success: function (data){

    },
    error: function (data){
        console.log(JSON.stringify(data));

    }

});
}

function getFileBuffer(file) {
var deferred = $.Deferred();
var reader = new FileReader();
reader.onload = function (e) {
    deferred.resolve(e.target.result);
}
reader.onerror = function (e) {
    deferred.reject(e.target.error);
}
reader.readAsArrayBuffer(file);
return deferred.promise();
}

function uploadFileSP(listName, id, fileArray, fileCount) {
var FilesCount = 0;
var deferred = $.Deferred();
var uploadStatus = "";
var file = fileArray[0];
var getFile = getFileBuffer(file);


getFile.done(function (buffer, status, xhr) {
    var bytes = new Uint8Array(buffer);
    var content = new SP.Base64EncodedByteArray();
    var queryUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/lists/GetByTitle('" + listName + "')/items(" + id + ")/AttachmentFiles/add(FileName='" + file.name + "')";
    var uploadCount = 0;
    $.ajax({
        url: queryUrl,
        type: "POST",
        processData: false,
        contentType: "application/json;odata=verbose",
        data: buffer,
        headers: {
            "accept": "application/json;odata=verbose",
            "X-RequestDigest": $("#__REQUESTDIGEST").val()
        },
        success: function (data) {
            FilesCount++;
            uploadStatus = FilesCount;
            fileArray.shift();
            if (fileArray.length > 0) {
                uploadFileSP("BUGSList", id, fileArray, fileArray.length);
            }
            else {
              window.location.assign('domain/Lists/BUGSList/AllItems.aspx');                    
            }
        },
        error: function (err) {                              
        }
    });
    deferred.resolve(uploadStatus);
});

getFile.fail(function (err) {
    deferred.reject(err);
});
return deferred.promise();
}

Here is my HTML input field.

<div class="form-group">
                <label for="exampleInputEmail1">Requester Name</label>
                <input type="name" name="userTitle" class="form-control" id="userTitle" readonly="readonly" aria-describedby="emailHelp">
            </div>

            <div class="form-group">
                <label for="exampleInputEmail1">Department</label>
                <input type="name" name="department" class="form-control" id="department" aria-describedby="emailHelp">
            </div>

            <div class="form-group">
                <label for="exampleInputEmail1">Title</label>
                <input type="name" name="title" class="form-control" id="title" aria-describedby="emailHelp" placeholder="Enter bugs title">
            </div>

            <div class="form-group">
                <label for="exampleInputEmail1">Description</label>
                <textarea name="description" class="form-control" id="description" aria-describedby="emailHelp" placeholder="Description"></textarea>
            </div>

            <div class="accounttype">
              <label for="exampleInputEmail1">Priority</label><br>
                <input value="Low" id="priority" name="priority" checked="checked" type="radio">
                <label for="radioOne" class="" checked="">Low</label><br>
                <input value="Normal" id="priority" name="priority" type="radio">
                <label for="radioTwo" class="">Normal</label><br>
                <input value="High" id="priority" name="priority" type="radio">
                <label for="radioTwo" class="">High</label>
            </div><br>

            <input type="file" multiple id="inputFile" class="attachmentButton" name="attachmentButton"/>
            <div id="WSOutput"> &#160;</div> 
            <br>

            <button type="submit" class="btn btn-primary" onclick="addItem();" style="float: right;">Submit</button>

Answer 1

Exactly what type of validation you are asking for? Validation on whether the input field has a value? Validation on the type of information entered? (example - valid email address)

If you are using HTML5, you can use new "required" attribute on the input fields which will automatically show an error if a value is missing. More info can be found here

With HTML5, you can also perform some types of validations such a "Email" An example of this can be found at this stackoverflow post here

If you need to support older versions, you can write javascript code to perform your validations. There are many ways to do this with many different techniques that goes beyond this post. An example of some of these ideas can be found here