Validation Group - Githubissues

I apologize in advance, I am beginner in English!

Hi Alex.

Is there a way to relating some form's elements to a specific <input/button type="submit"> for partial validation purpose? (a JavaScript less way?!)

In ASP.NET Web Forms, there are only one <form> that contains all other elements. It begins just after <body> and ends before </body>

When we have one submit button, every things is OK. When we have more submit buttons, clicking on every ones will cause all inputs validation occur.

In traditional method, we can not use browser's form validation capability, and we should use Built-In Validation components. They are not "Tweeter Bootstrap" friendly.

Using webshim in [single submit button] situations is awesome, but for [multi submit button] situations, I need a mechanism to arrange some form's element and one specific submit button as a group and to prevent validation of others out of this grouped elements.

I want to suggest an attribute for grouping form's elements: data-validation-group : String When a submit button will have clicked, if it has data-validation-group, it just fires validation of those form's elements they have same data-validation-group value, otherwise all form's elements will be validated.

If you make it happens on webshim, I would greatly appreciate it.

I write some explanation about my problems below:

----- ASP.NET Web Forms Architecture ----- Against other web development technologies, ASP.NET Web Forms is not action oriented! It is a Component Oriented, State full and Event Driven Technology. ASP.NET engine manages converting of Server-Side components to HTML/JavaScript/CSS and in other hand, it converts user interactions to server execution routines (Server-Side Events). Web apps development via ASP.NET Web Forms, looks like Desktop apps developments (Like Delphi on Windows or Kylix on Linux) So, Developers should follow many rules to create Web Apps. One of them is we can not add any other <form> to an ASP.NET Web Forms Page. It is the root of my problem.

You can build this easily your own. Here is an example:

<form novalidate="" class="ws-validate">
    <fieldset class="pseudo-form">

        <input required  />

        <input type="submit" />
    </fieldset>
    <fieldset class="pseudo-form">

        <input required  />

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

<script>
    $(function(){
        $('body').on('click', function(e){
            var pseudoForm;
            if(e.target.type == 'submit' && (pseudoForm = $(e.target).closest('.pseudo-form')[0])){
                var invalids = $('input:invalid, select:invalid, textarea:invalid', pseudoForm);
                if(invalids.length){
                    invalids.trigger('updatevalidation');
                    e.preventDefault();
                    return false;
                }
            }
        });
    });
</script>

About the way how ASP.NET is handling these things. In general I think it's just stupid, while it is perfectly fine to use just one action, a form has its own semantics, that is defined by WHATWG or W3C and this should not be changed. Developers should extend HTML not abuse it.

Please close this issue, if this answers your question.

Thanks to your consideration.

About your solution: This solution is good when we have used <fieldset> as a group wrapper. Sometimes we need to arrange some input elements around the page as a semantic group. In other hand maybe we have a page with 2 or more submit button; One for main submission logic, one for cancelling purpose, one for checking some situation on server, one for redirecting to another page and .... Every button has own validation logic.

I had written JavaScript for solving these situations but I think this approach is not good enough. When I start new Application, I should deliver all JS files from old apps to new one but webshim is an integrated solution.

About ASP.NET: Nowadays ASP.NET has 3 different development approaches:

ASP.NET Web Forms, Component Oriented, State-full, Event Driven, ...
ASP.NET Web Pages, Exactly Like [Classic ASP] or [PHP] but based on .NET Framework
ASP.NET MVC, Like [ASP.NET Web Pages] but constrained to follow MVC architectural pattern.

About ASP.NET Web Forms: ASP.NET Web Form is a great technology for Rapid Application Development (RAD). Developers just need to know a little about HTML,CSS,JS. Every things you need to build Data-Centric web apps is available and you just need to wire components to each other by Server-Codes to making great apps! Just like implementing an custom electronic circuit by wiring some ICs. Its architecture back to 2001 when this technology was presented. (IE 6 and HTML 4 era)

I know this sounds ridiculous, Developing Web Apps without knowing HTML or without following W3C standards. But ASP.NET Web Forms follows standards itself in its engine, so developer just need to know Server components purpose and behaviors.

To implementing forms we use <asp:TextBox> and <asp:Button>. ASP.NET Web Form engine render those as <input type='text'> and <input type='submit'>. In ASP.NET Web Forms there is a mechanism to grouping inputs, buttons and validator components for doing custom validation.

Sample: <asp:TextBox ID='txt1' ValidationGroup='groupName'> <asp:TextBox ID='txt2' > <asp:Button ID='btn1' OnClick='btn1_Click' ValidationGroup='groupName'> <asp:Button ID='btn2' OnClick='btn2_Click' > <asp:RequierdFieldValidator ... TargetControlID='txt1' ValidationGroup='groupName'>

When end-user clicks on btn1, some injected JavaScript codes will run to check just txt1 emptiness; if it is filled, form will be submit and on server there is a C#/VB method (btn1_Click) that process the form (developer codes that). When end-user clicks on btn2, form will be submit without doing validation and on server method (btn2_Click) will process the form.

I remind again, this approach was presented on HTML 4 era! Today Microsoft did not change/update this mechanism because of compatibility concerns! This mechanism injects huge JavaScript Codes to validate forms and as I said before is not bootstrap friendly.

After all: I think, my request, can be a flexibility point for webshim if it supports custom validation situations without writing JavaScript. If you do not agree to me, I respect. I apologize for verbosity over this post. Good luck!

You can also easily change my solution to anything you want. Here is an example using using your data-validation-group attribute:

<form novalidate="" class="ws-validate">
    <fieldset>

        <input data-validation-group="group-1" required  />

        <input data-validation-group="group-1" type="submit" />
    </fieldset>
    <fieldset>

        <input data-validation-group="group-2" required  />

        <input data-validation-group="group-2" type="submit" />
    </fieldset>
</form>

<script>
    $(function(){
        $('body').on('click', function(e){
            var validationGroup;
            if(e.target.type == 'submit' && (validationGroup = e.target.getAttribute('data-validation-group'))){
                var filter = '[data-validation-group="'+ validationGroup + '"]:invalid';
                var invalids = $('input' + filter +', select' + filter +', textarea' + filter);
                if(invalids.length){
                    invalids.trigger('updatevalidation');
                    e.preventDefault();
                    return false;
                }
            }
        });
    });
</script>

In case you have buttons, that are doing different things HTML5 has added the form* attributes (formtarget, formaction, formnovalidate and so on).

So you can do this without any scripting:

<form class="ws-validate">
    <fieldset>
        <input required  />
        <input formnovalidate="" value="save" type="submit" />
        <input value="submit" type="submit" />
    </fieldset>
</form>

But your request is quite special and therefore you always need to extend it with some little JS. As shown above you can write it pretty general so that you will be able to re-use them in all your ASP.Net projects, but I can't add something, that is only a special case. It's nice that we have an API for this.

And about the approach of ASP.NET. This is not busted due to HTML5, it already was against semantics in HTML3.2.

For example screenreader users can jump from form to form. Making it easy to jump to search form, login form and/or contact form. This feature is busted.

Another HTML4 feature is, that if you hit enter in a text-ish input the form get's submitted (by clicking the first submitter automatically). I don't know ASP webforms, but in case this might still work "magically", they had to re-implement this native feature by script, because the native feature is busted. At least at this point it should have become clear, that every feature that directly hooks into the semantics or extends the behavior of a form element is busted by this approach.

In general I like technologies, where you write some code and then your HTML/CSS/JS is scaffolded for you, but it has to be made the right way (with standards in mind). Extend it instead of break it!

Thanks a lot Alex. Your code inspired me. I have used your sample codes and create a patch to emulating Validation Group behaviors exactly like the original ASP.NET Web Forms mechanism.

var invalidValidationGroupAttribute = '[data-validation-group="{0}"]:invalid';
var invalidElementSelector = 'input{0},select{0},textarea{0}';

var getInvalidElementSelector = function (groupName) {
    var attribute = invalidValidationGroupAttribute.replace(/\{0\}/gi, groupName);
    return invalidElementSelector.replace(/\{0\}/gi, attribute);
};

var invalidUngroupedSelector = (
    'input:not(input{0}){1},' +
    'select:not(select{0}){1},' +
    'textarea:not(textarea{0}){1}')
    .replace(/\{0\}/gi, '[data-validation-group]')
    .replace(/\{1\}/gi, ':invalid');

var emulateValidationGroup = function (eventArgs) {
    var target = eventArgs.target; // additional variable to help more minification
    var type = target.type; // additional variable to help more minification

    if (type && type.toLowerCase() == 'submit') {
        var validationGroup = $(target).data('validationGroup');

        var invalidElements;
        if (validationGroup) {
            var invalidSelector = getInvalidElementSelector(validationGroup);
            invalidElements = $(invalidSelector);
        } else {
            invalidElements = $(invalidUngroupedSelector);
        }

        if (invalidElements.length) {
            invalidElements.trigger('updatevalidation');

            eventArgs.preventDefault();
            return false;
        }
    }
};

// window.onload event handler predefined by ASP.NET AJAX Client Library
// it is equivalent to jQuery(window).load(function (eventArgs) { ... });
function pageLoad() {
    $('form').attr('novalidate', 'novalidate'); // it can be hard-coded inside <form> begining tag

    $('body')
        .off('click', emulateValidationGroup) // because of ASP.NET AJAXify asynchronous post back
        .on('click', emulateValidationGroup);
}

I tested it on some my last apps. All of them work good. So thanks a lot.

In case of your descriptions, I am not expert to concepts of web standards like you, but I think your opinions about busted standards, rationally, is true. Also I think ASP.NET Web Forms is a great framework for building wide range of data-centric web apps since 2001 to now. And I think Microsoft is a great innovator company.

In case of hitting Enter as clicking of form's default button, I know there is 2 ways for it, by markup declaration and by C#/VB codes. and Yes, it is pre implemented by JS as a part of ASP.NET 2.0 render engine and works good.

Anyway... When IE 10 had been released, because of supporting HTML5 Form Validation, I researched to find a way to use this great capability instead of Validator Components of ASP.NET Web Forms and to date, this was a nightmare to me. So, I'm extremely grateful for your considerations, solutions, and inspiring of me, and at the end for your lovely webshim. Good Luck Alex.

aFarkas / webshim

Validation Group #515