Form Validation

[mattyd]

Hello.

I have been doing research for about a week on form validation (JS, jQuery, CSS).

I already have a nice form, but I need to add the validation elements.

I'm a bit stuck.

I know what I do and do not want with the validation:

Want:
* Clean, nice popups. Pretty and visually customizable
* Popup is initiated and displayed when field is blurred with an incorrect value within, for example: email@gmail (Notice, no ".com")

Don't Want:
* The standard, white popup box with an error displayed (I believe that is HTML)

Here is a simple example that I wish to modify from my form:

<label class="grey" for="log">Username:</label>
<input class="field" type="text" name="log" id="log" value="" size="23" />

This does not seem like it would be very difficult, but so far it is appearing to be so.

Any advice, direction or snippets to help me along my way would be very appreciated.

Thank you in advance,
Matthew

[JorgeM]

So, at this point you'd either have to create your own solution or you can integrate a jQuery validation plug-in (there are a few of them out there).

Which do you prefer? Building something that includes pop-ups and with easy customization would take some time, of course.

If you find a plug-in, which it may be easy to integrate, does it have all of hte features you are looking for? For example, here is a common jQuery validation plugin that is easy to integrate, but may not have the effects you are looking for: http://jqueryvalidation.org/

[mattyd]

JorgeM

I believe I shall try http://jqueryvalidation.org/

I have actually already looked into that one already but gave up out of impatience and frustration.

Honestly, for now, I do not need anything fancy; That can be saved for a future rebuild.

Thanks for all your help!

Matthew

When you say popup, do you mean like a flat alert message close to the field or do you mean an actual ultra-annoying popup window (like a modal dialog).

[mattyd]

diafol:

I mean a flat alert message by the field. No, not an ugly, intrusive, popup window.

Flat. This site is being designed as super-flat.

Thanks for your help!

[mattyd]

I downoaded http://jqueryvalidation.org/ - One problem I'm concerned with this is: It is jam-packed with folders/files and I am not exactly sure what is needed and what I'll require. Some files I have no clue what they are even.

I will spend time looking into this tomorrow morning, running a test build for it, and report back here with results, success, problems and/or questions.

Thank you,
Matthew

I remember using a nice one called YAV:
http://yav.sourceforge.net/en/validationrules.html# - many moons ago. Not jquery though. I can't remember there being loads of folders.

[JorgeM]

Matthew, if you dont need anything fancy, you could just create a .js file and write out your validation rules, one by one (input element by input element). For example...

Say you have an input element with an id="txtUserName". Then you can (with the help of jQuery write a block of code to handle some validation. Say you want to make sure the text is at least 6 characters... Then on the blur event, check to see if it meets this requirement...

conceptual...not tested...

$('#txtUserName').blur(function ()
{
    var userName = $('#txtUserName').val();
    var minlength = 6;

    if (userName.length < minlength)
    {
        $('#infoMessage').html("The username must be at least 6 characters.");
    }

});

do the same for each input element and you got basic validation. You need some additional components (another variable to hold the status of validation) here like keeping track if a validation fails so you dont enable the submit button until all of the input elements pass validation. I only provided 10% of the total solution here. There's quite a bit of additional work involved, but I wanted to share with you a simple concept.

[a.wamzo]

i need some help, i have a vb.net form i have 7 textboxes, and a combobox inclusive, which i am preparing that i will be able to connect it to the database.
i kindly need a code to help with combobox, "sex" combobox having two values i.e. Male, Female.

Why reinvent the wheel. I always use parsely.js for client side form validation coupled with server side just to be on the safe side.

http://parsleyjs.org/

It does have a few js file but you do NOT need to fully understand them,just use the plethora of examples and documentation to guide you. Or post here if you are stuck.