Adding Validation Message to Canvas Input Fields (Issues in iOS Devices)

While adding a validation message to a canvas Input field in html forms for adding Signature, consider the below points.

• When we convert the value of blank canvas to a string value for the comparison between empty and non-empty canvas fields, the value for blank canvas will be different for iOS devices including iPhone, iPad, Mac book etc.
• While testing it is found that there were two different values for iOS devices, older version iOS devices has a common value and latest iOS devices from 2018 onward has different value for the same input field used in a html form.
• Also the value of same blank canvas field is different in firefox browser from Google Chrome browser.
• In anrdoid devices and in chrome browser the it is found that the values are same.

Example:

In this html form there is a canvas input field for adding signature and validation for that field is also added.

there are 4 different string values for this blank canvas field :

1.Common value for all desktop devices including windows and android mobile devices.

2. For latest iOS devices including iPhone 11, 12 series, iPad pro, Mac etc.

3. For Older older iOS devices like iPhone X, iPad 7, 8 etc.

4. For Mozilla firefox.

We need to consider all these values while adding validation message to this field:

Code snippet:

blankSignature: "iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAAAAXNSR0IArs4c6QAAAp5JREFUeF7t1bERwDAMxLB4/6UzgV2wfaRXIci8nM9HgMBV4LAhQOAuIBCvg8BDQCCeBwGBeAMEmoA/SHMzNSIgkJFDW7MJCKS5mRoREMjIoa3ZBATS3EyNCAhk5NDWbAICaW6mRgQEMnJoazYBgTQ3UyMCAhk5tDWbgECam6kRAYGMHNqaTUAgzc3UiIBARg5tzSYgkOZmakRAICOHtmYTEEhzMzUiIJCRQ1uzCQikuZkaERDIyKGt2QQE0txMjQgIZOTQ1mwCAmlupkYEBDJyaGs2AYE0N1MjAgIZObQ1m4BAmpupEQGBjBzamk1AIM3N1IiAQEYObc0mIJDmZmpEQCAjh7ZmExBIczM1IiCQkUNbswkIpLmZGhEQyMihrdkEBNLcTI0ICGTk0NZsAgJpbqZGBAQycmhrNgGBNDdTIwICGTm0NZuAQJqbqREBgYwc2ppNQCDNzdSIgEBGDm3NJiCQ5mZqREAgI4e2ZhMQSHMzNSIgkJFDW7MJCKS5mRoREMjIoa3ZBATS3EyNCAhk5NDWbAICaW6mRgQEMnJoazYBgTQ3UyMCAhk5tDWbgECam6kRAYGMHNqaTUAgzc3UiIBARg5tzSYgkOZmakRAICOHtmYTEEhzMzUiIJCRQ1uzCQikuZkaERDIyKGt2QQE0txMjQgIZOTQ1mwCAmlupkYEBDJyaGs2AYE0N1MjAgIZObQ1m4BAmpupEQGBjBzamk1AIM3N1IiAQEYObc0mIJDmZmpEQCAjh7ZmExBIczM1IiCQkUNbswkIpLmZGhEQyMihrdkEBNLcTI0ICGTk0NZsAgJpbqZGBAQycmhrNgGBNDdTIwICGTm0NZuAQJqbqREBgYwc2ppNQCDNzdSIgEBGDm3NJiCQ5mZqROAH9YAAZR9IZRoAAAAASUVORK5CYII=",
        blankSignatureIOS:"iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAyKADAAQAAAABAAAAZAAAAAAujE8CAAABdUlEQVR4Ae3QMQEAAADCoPVPbQwfiEBhwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwY+AwM48wABxKIRswAAAABJRU5ErkJggg==",
        blankSignatureIOS2:"iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAAAAXNSR0IArs4c6QAAAXVJREFUeAHt0DEBAAAAwqD1T20MH4hAYcCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGDBgwYMCAAQMGPgMDOPMAAcSiEbMAAAAASUVORK5CYII=",
        blankSignatureFF:"iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAAAZElEQVR4nO3BMQEAAADCoPVPbQwfoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4GM48wABem1MwwAAAABJRU5ErkJggg==",



if (this.signature) {
                    setTimeout(function() {
                    //console.log("signOUT", self.signature)
                    var signature = self.signature.split('data:image/png;base64,')
                        // console.log("signLength1", signature.length)
                        // console.log("signLength2string", (signature[1].toString()))
                        // console.log("blanksign", self.blankSignature)
                        // console.log("iOSsign", self.blankSignatureIOS)
                        // console.log("iOSsign2", self.blankSignatureIOS2)
                        if (signature.length && ((signature[1].toString()) === self.blankSignature || (signature[1].toString()) === self.blankSignatureIOS || (signature[1].toString()) === self.blankSignatureIOS2  || (signature[1].toString()) === self.blankSignatureFF)) {
                            var message = _.translate("Signature is required");
                            self.showErrorByLineId(message, 'in-modal-SignatureErrorMsg');
                            //console.log("signIN", self.signature)
                            errorFound = true
                        }else {
                        $('#in-modal-SignatureErrorMsg').text('');
                    }}, 100)

                }