We Keep Coding

how to write a js script to make data import from a form error free

I have implemented a HTML webpage which has a form, now I want to add a script to it to load (import) form input given by user and do check if all of it is white spaces and if it is then give error message otherwise proceed. I want to achieve this using Javascript. I could not find the method to do so, I tried disabling the button until length of string is not equal to number of whitespaces, but that doesn't seems efficient.

This worked for me
document.addEventListener('DOMContentLoaded', () => {
// by default submit button is disabled
document.querySelector('#submit').disabled = true;
// Enable button only if there is required text in the input field
document.querySelector('#id1').onkeyup = () => {
var my_string = document.querySelector('#id1').value;
var spaceCount = (my_string.split(" ").length - 1);
if (document.querySelector('#id1').value.length != spaceCount)
document.querySelector('#submit').disabled = false;
else
document.querySelector('#submit').disabled = true;
};
});

You can use HTML5 validation See Link for more info
You can add attributes like required to your html. This also allows you to set custom error messages if the input is not valid.
In JS, you can check if($form.valid)
You can use jQuery to disable the submit button until its valid also.

AEM Form: Change access control of textfield

I'm using Adobe AEM Form, javascript for scripting.
In my form, I have a drop down which allow the user to pick one of the dropdown value item or to fill the textfield by typing. My script as follows:
Report.Page2.part2.body.subform.Dropdown::exit - (JavaScript, client)
if(this.selectedIndex == "0"){
Textfield.access = "???????"
Textfield.fillColor = "255,255,255"
}
else{
Textfield.rawValue = this.rawValue;
Textfield.access = "readOnly"
Textfield.fillColor = "192,192,192"
}
I am able to change the Textfield to read only, but not able to change it back to writtable. Can someone advice me how to? and other than "readOnly", what other access control can I assign to the textfield.
Thanks!

There is already an accepted answer so just adding a few details on why it works the way it works as suggested in my comments.
TextField.access="literal";
will generate a markup as below
<input type="xxx" literal>
</input>
There are some validations in the framework to check for the allowed values so the literal won't break the HTML over here. The key issues is that this literal is not an attribute so it cannot have a value. For example, the following markup is not possible:
<input enabled="false"></input>
In order to clear the attribute, the only way you can reset it is by using an empty string as below:
TextField.access="";

Report.Page2.part2.body.subform.Dropdown::exit - (JavaScript, client)
if(this.selectedIndex == "0"){
Textfield.access = ""
Textfield.fillColor = "255,255,255"
}
else{
Textfield.rawValue = this.rawValue;
Textfield.access = "readOnly"
Textfield.fillColor = "192,192,192"
}

Compare duplicate values of two select in materializecss framework

I have two select boxes and i dont want that the user choose the same value in both.
I've tried some solution proposed on stack, but the materialized select is different from "normal select" as contains the options in list item elements.
However, i came up with a solution, which is all but elegant, i know..im a novice with these things.
But its not working as i intended.
I want to create an additional method for jquery validation plugin, in the example on fiddle i've inserted an additional field to show the error placement.
I think is pretty simple, but i just can't figure out how to do it...
$.validator.addMethod("checksameval", function(value, element) {
return $('#pref1').val() == $('#pref2').val()
}, "Pref1 and Pref2 cant have same value!");
https://jsfiddle.net/L24otmaa/5/
edited with custom method (still not working..)

The problem with your solution is that the form will still be valid and therefore it will be possible to send it anyway.
You have to add a custom validation. The plug-in offers a callback where you can check whatever you want before you finally submit it.
This can be done by adding your validation to a custom submit handler
var isSameValue = function() {
var val1 = $('#pref1').val();
var val2 = $('#pref2').val();
if (val1 == val2) {
$customErrorDiv.text('error you cant select same value twice!!');
return true;
}
$customErrorDiv.text('');
return false;
}
// check also on runtime
$('.course').change( function() {
isSameValue();
});
$("#application").validate({
// check before submitting
submitHandler: function(form) {
if (isSameValue()) {
return;
}
// submit the form manually
form.submit();
}
});
Fiddle: https://jsfiddle.net/7uhkddrx/
Documentation: https://jqueryvalidation.org/validate/
Of course you would have to style this message according to your needs.
EDIT: By the way: currently your select boxes are not set to be required.
EDIT2: added checking on runtime

ASP.NET Form validation - success event in JavaScript?

I would like to subscribe to whatever event is fired when my ASP.NET form is validated successfully.
Here is the scenario: On the click of a button on a payment form, I want to show a message 'processing,' however I only want to show this button when the for is validated succesfully.
I am using native ASP.NET form validation.

In a round-about way, you can if you override the Page_ClientValidate method as in:
var fn = Page_ClientValidate;
Page_ClientValidate = function(..) {
var result = fn(..);
if (result == true) {
//run code for success
}
}
I don't know why this was demoted but this approach is great because it works from all validation scenarios for customization (from buttons, WebForms_DoPostBackWithOptions client method, etc.).
HTH.

I don't think that the built in validators expose any such events. You could always use the CustomValidator and provide a OnClientValidate method that will combine the validation you're looking for as well as the UI changes you desire.

Call the following Javascript function whenever you want and pass the validation group name of your form to it..
function ValidateForm(ValidationGroupName)
{
var validated=Page_ClientValidate(ValidationGroupName);
if(validated)
{
//do the logic here
return true;
}
else
{
return false;
}
}
Hope this will help you....

I don't think it's going to be easy to do it your way but what you can do is the following:
<asp:Button onclientclick="if (Page_IsValid) return true; else {alert('Not Valid'); return false;}"/>
This will basically throw an error is validation is incorrect, otherwise it will continue.

Using javascript namespaces with ruby and sinatra

I'm trying to create some javascript validation for my web app and it's all going pretty well except I do not want my script to look for something to validate all the time.
Let's say I have two things I want to validate for but they do not occur on the same page. They are on '/page1' and 'page2' and I don't want my validator for page1 to run on page2.
That should be possible through object literals right?
Something like this:
var validations =
{
page1validation :
{
init : function()
{
// validation page 1
}
}
page2validation :
{
init : function()
{
// validation page 2
}
}
}
So I need to call these validation methods like validations.page1validation.init() and I guess I could do this with inline javascript in each haml view where I have a form that needs validation.
%form{:action => ""}
%input{:type => "text"}
%input{:type => "submit", :value => "save"}
:javascript
$(function() {
validations.page1validation.init();
});
But there must be a better solution - I just can't think of one right now. So what would you do to make sure the validator doesn't try to validate all the time?
Oh and the inline javascript won't work if I put the javascript at the bottom in my layout file...

The simplest way to do what you want is to make the forms different, either with a different id or class.
Then your validations can use that difference to "target" each form independently. You don't need the extra "namespace" with that approach. Instead, you do something like this.
$(function() {
page1validation();
page2validation();
});
function page1validation() {
var form = getElementById('form1'); // form1 is the first form
if(!form) then return;
// .. perform validations in form 1
}
function page2validation() {
var form = getElementById('form2');
if(!form) then return;
// .. perform validations in form 2
}
Also, I'd advice you to invest some time in learning a js library like jQuery. It provides some built-in methods that will make the code above much smaller.