casperin / nod Goto Github PK

error message doesn't work in input-append

I have form in modal window.
First thing i don't like is that form is checked for errors on close button. Is it possible to turn that of. I would like to evaluate form only on submit and while inserting data.
On open modal I clear all fields so form is empty but I didn't find the way to clear error messages inserted by nod.
Example.

1. open form (click on add new)
2. nothing is inserted and click close ... form is evaluated and all is red ... modal is closed
3. open form again ... all is red

hope there is a solution.

I spent entire day try to solve this problem, but seems can't find the remedy.

This is my program skeleton http://jsfiddle.net/zhwzY/

From the snippet, I try to make variable "form_input" to switch to a new value depend on the checkbox. With this method, I can prevent NOD from validating unecessary input. But the variable is not updating to the new value.

Please help.

P/s : No external reference to the NOD library in jsFiddle.

Hi,

I tried to use nod with the validator same-as:

var metrics = [
[ '#repeatPassword', 'same-as:#inputPassword', 'Not matching' ]
];

Unfortunately, this dosent work right. If the first inputPassword contains some string value and the second repeatPassword is empty, the validation dosent produce any error. In this case I can freely submit the form.

Hi,

I am currently developing a grails application and I use bootstrap for the front end UI. I now want to incorporate this plug-in in order to take advantage of client-side validation. The issue I am having with the code below is that when I exit any on of the fields that has validation on it the messages show up next to all the fields that have validation. I want to be able to only show the validation message for that field they exited and not the others, here is my code:

<form id="ex4" class="form-horizontal">
  <p>Leave at least one number</p>
  <div class="control-group">
    <label class="control-label">Home</label>
    <div class="controls">
      <input type="text" id="ex4a_home">
    </div>
  </div>
  <div class="control-group">
    <label class="control-label">Work</label>
    <div class="controls">
      <input type="text" id="ex4a_work">
    </div>
  </div>
  <div class="control-group">
    <label class="control-label">Mobile</label>
    <div class="controls">
      <input type="text" id="ex4a_mobile">
    </div>
  </div>
  <div class="controls">
    <button type="submit" class="btn">Call me</button>
  </div>
</form>

<script>
  var metrics = [
    [ '#ex4a_home, #ex4a_work, #ex4a_mobile', 'one-of', 'Add at least one number' ]
  ];
  $( '#ex4' ).nod( metrics );
</script>

Am I doing something wrong? Thanks in advance for the help.

That would be great.

BTW I've register the library in bower now you are visible

$ bower register jquery-nod git://github.com/casperin/nod.git
Registering a package will make it visible and installable via the registry.
Proceed (y/n)? y
registered jquery-nod to git://github.com/casperin/nod.git
work at imac-work in ~/Desktop
$ bower search jquery-nod
Search results:

  - jquery-nod git://github.com/casperin/nod.git

This is my first use of a Jquery plugin, so please excuse me if I seem a little off-topic.
I'd like to know how to stylize errors messages displayed par Nod using css or others, same question for the input boxes who display such messages.

Thank you.
Regards

This change is a little hard because it will break backwards compatibility , but I think it should be done as soon.

If you check other libraries you will see this behavior.

If you have optional fields Eg: an optional email how do you will validate this ? because it looks that all validations force a not empty validation.

Validating only when submit button is clicked and not on "keyup" event.

Any idea? Can we achieve this?

Hi,

I tried to use nod with the validator same-as:

var metrics = [
[ '#repeatPassword', 'same-as:#inputPassword', 'Not matching' ]
];

Unfortunately, this dosent work right. If the first inputPassword contains some string value and the second repeatPassword is empty, the validation dosent produce any error. In this case I can freely submit the form.

Hey Casperin,

great work and a really clean approach to forms validation! Your sample for ajax checking does not seem to work properly with v 1.0.2 due to the async nature of the $.get() request, or am I overlooking something? After trying to get server-side validation to work and looking into your source a quick fix for at least the documentation could be

var checkFn = function(value) {
return $.trim($.ajax({type: "GET", url: 'check_email.php', data: value, async: false}).responseText);
};

Best regards, Nicolas

Meaning that if you send the form, you might get the message 'are you sure you want to leave this blank?'. Probably more of a reminder to not leave the field blank, but it can still get sent that way.

I know can be done fairly easy with normal script, but maybe it fits quite well in this plugin.

Hello,

I use predefined value in a form and it looks like it will be skipped by NOD.

Steps to reproduce:

I have added a value into the first form from examples for NOD:

  <form action="" id="a" class="form form-horizontal">
    <div class="control-group">
      <div class="control-label">
        <label>Your age</label>
      </div>
      <div class="controls">
        <input type="text" id="a_age">
      </div>
    </div>
    <div class="control-group">
      <div class="control-label">
        <label>Email</label>
      </div>
      <div class="controls">
        <input type="text" id="a_email" value="[email protected]">
      </div>
    </div>
    <div class="controls">
      <button type="submit" class="btn">Go!</button>
    </div>
  </form>

• Put cursor in "Your age" field and input a digit.
• Wait for dalay

Actual result:

Submit button is disabled.

Expected result:

Submit button is enabled.

Thanks,
Anton

The jQuery object is being passed into the IIFE wrapper and being aliased to $, however this aliased variable is only used when defining the jQuery plugin and the global jQuery is being used throughout the rest of the code. This is fine but when jQuery.noConflict(true) is executed this variable is no longer available.

Is it possible to make use of the aliased variable so we don't run into this issue?

Current version of NOD validation upon creating it, doesn't provide a way to remove its validation checks on the forms. i.e., there is nothing like a destructor. Compelled by such requirement, I had to fork your repo and had to add a feature to accommodate it.

It is useful to dynamically reassign new validations to the form upon certain events.

https://github.com/simtron/nod is the forked repository.

var email_valid = function (value){
var flag=0;
$.ajax({
url: "/users/valid",
type: "POST",
data: {"email": value, "_csrf": "#{csrf_token}"},
success: function(data){
flag=1;
}
})
return flag;
}

[ '#email', (email_valid),' Email is in use. Please try another one.']

It doesn't work. How can i accomplish this?

Hello,

How can I alert the validation message as well as continue to display on screen.
Thanks for help.

I'm trying to rebind the plugin because I've some hidden inputs that I need to validate only in the case when a checkbox is checked, and I've tried rebinding the plugin when I show these inputs, the problem is that you're creating a new instance of the plugin each time when I call $(selector).nod();

Thanks for this awesome plugin, please keep my comment in mind and fix the problem if possible.

Best regards

This is a good project, but i have a problem with form ajax.
To submit the page is reloaded onto itself, even though I specified event.preventDefault(); on my button.

I have a web application that has multiple AJAX jQuery forms on a single page, and there are a few input fields outside these forms that they share. On submit of a form, some Javascript runs to dynamically populate an HTML table. My question is: is there a way to create a Nod instance on a form, and validate fields outside of it? Or can I make several Nod instances on the <body> element that use different metrics to validate the different forms?

I love this plugin, its exactly what I'm looking for.

But it doesn't seem to be applying the styles no matter what I do so I must ask, is this Twitter Bootstrap 3 compatible?

I know its loaded as my site is using it heavily so I'm guessing the plugin is looking for an older class.

In some instances a form with have multiple submit buttons, like an ASP.NET webform.

Some buttons should set off the validation and the form shouldn't submit if the validation fails, other buttons should be able to submit without validation.

The main Jquery Validation plugin handles this by allowing form submission if the button has the class "cancel":

http://docs.jquery.com/Plugins/Validation/Reference
Skipping validation on submit

To skip validation while still using a submit-button, add a class="cancel" to that input.

I was hoping that the submitBtnSelector property would work similarly, where the valifation would only occur if the form was submitted with a button that matches that selector, but currently and submit on the page fires off the validation.

I would suggest either change the onsubmit handler to check for a match with the submitBtnSelector as the event target, or implementing a filtering class like the original validation library.

You need to tag the repo to 1.0.0 so bower can work properly

I do not know JavaScript well, so I'm missing something that I think is simple.

I am getting the following error:

Uncaught TypeError: Cannot set property '__nod' of undefined

Whenever I try to add two forms for validation. If you remove a form and leave only one, everything works.

The code I'm trying to run is as follows:

var register_form = [
    ['#register_user_name', 'presence', 'Seu nome não pode ficar em branco'],
    ['#register_user_email', 'presence', 'Seu e-mail não pode ficar em branco'],
    ['#register_user_email', 'email', 'Digite um e-mail válido'],
    ['#register_user_password', 'presence', 'Sua senha não pode ficar em branco'],
    ['#register_user_password_confirm', 'presence', 'Sua senha não pode ficar em branco'],
    ['#register_user_password_confirm', 'same-as:#register_user_password', 'Suas senhas não combinam'],
    ['#register_user_phone', 'between:10:11', 'Telefone deve ter entre 10 e 11 dígitos incluindo o DDD.'],
    ['#register_user_twitter', 'min-length:3', 'Twitter deve ter no mínimo 3 caracteres'],
    ['#register_user_tos', 'presence', 'Aceitar os termos de uso é obrigatório.']

];

$("#register_form").nod(register_form);

var contact_form = [
    ['#contact_name', 'presence', 'Seu nome não pode ficar em branco']
];

$("#contact_form").nod(contact_form);

Anyone know why and how to fix it? :(

Hi, Is it possible validate checkboxes? Tried using the 'one-of' metric but it's not working.

I have five checkboxes and only require that the user select one in order to submit the form.

The commit 4707988 introduced a change of when the checks are run.
Previously, checks on a form field are only run once the user placed the cursor inside, made a change, or moved the cursor outside again. Plus, when the user submitted the form.
Now, the function formIsErrorFree calls runCheck on all listeners if their status is null.

You can see that change on example 3:
http://casperin.github.io/nod/ (here, 1.0.3 is still used)
http://jsfiddle.net/vb2hZ/ (this uses the latest version, 1.0.5)

If I enter "foo" (or anything else), it now immediately highlights an error on the dropdown, because I haven't selected a value there.
A more complex form that is empty at initialization, would be full with error messages before the user even has the chance to enter values.

I really don't like this behavior and have reverted back to 1.0.3 in my application. I understand that formIsErrorFree is used to programmatically check whether the form is valid and it that case it is totally valid to check all the form fields at once. But this should not be used internally whenever a change is triggered on a field.

There is currently (I think) no way to add validation for checkboxes.

--- Scrap that. I meant radio buttons...

tell me how to re-check the form after ajax selecting values ​​for the input fields

I think it would be great if we could show the user a message if the validation of a field was ok. On a lot of websites you see green checkmarks etc. if a username is still available and so on. It would simply be an additional message in the metrics array.

I have some fields that needs validation like phone number. That field is not mandatory but if used it should be validated. Is it possible to validate field only if it have value?

How do I get the validations to fire as soon as I "exit" the field, meaning if I get into the field through a tab, and then "leave/exit" that form field, the validation should be fired.

It works perfectly if I click inside a field.

Nice plugin btw 👍

Hi there and thanks for your great plugin.

I have trouble get the ajax check working. My jQuery Version is 1.8.2 and here are my files:

ipcheck.php

<?php

$ip = $_GET['address'];

if(filter_var($ip, FILTER_VALIDATE_IP, FILTER_FLAG_IPV4)) {
  echo "true";
}
else {
  echo "false";
}

?>

serversubmission.php

var ipCheck = function( value ) {
    $.get('ipcheck.php', { address: value });
};

var metrics = [
[ '#inputAddress', ipCheck, 'Not a valid ip address' ]
];

$( '#serversubmission' ).nod( metrics );

The ipcheck.php answeres true but the plugin always tells the input is not valid. Am i doing something wrong here?

There is a Nod.formIsErrorFree() method. But any way to access it? Thanks.

First, thanks for creating this great plugin!

I'm trying to bind Nod to a few radio button groups. After looking through the source I was under the impression that this would work.

Nod Metrics:
[ 'input[name=first-apartment-options]', 'presence', '' ]

HTML Markup:

    <div class='row-fluid'>
      <div class='span6'>
        <div class='control-group'>
          <label class='control-label required'>First Apartment?</label>
          <div class='controls check-radio'>
            <label class='radio inline'>
              <input name='first-apartment-options' type='radio' value='yes' />
              Yes
            </label>
            <label class='radio inline'>
              <input name='first-apartment-options' type='radio' value='no' />
              No
            </label>
          </div>
        </div>
      </div>

However nod_msg never gets applied to anything and the validation fails.
Any Thoughts?

1. Wrap entire lib in jQuery wrapper so it works even when $ isn't the jQuery caller
2. Don't trigger 'toggle' on an element. It's too general. trigger 'nod_toggle' or something instead.

Hi there,

Thks for this very useful script.
I'm experiencing a problem with adding the bootstrap error class to the parents div of my form inputs : it won't get added.
Msgs are displayed alright but without the "error" addition to .control-group
see the Contact Form in the footer at http://prototypes.lafabriquedureel.fr/tlabstudio/index-2.html
I commented out the keyup DelayedCheck from your script (behavior doesn't suit my need : blur / change events are quite enough in my opinion). But the problem was already occuring.
My HTML markup is OK and i didn't alter the default settings for groupClass or groupSelector.

Any clue on what might be wrong ?
Again : thx

Scenario If the form has only one field:

1. Put a cursor in it
2. Press Enter

Result:
Form is submited.

Expected:
Same behavior as in form with > 1 fields

This looks great, and we'd like to use it in our project. However, our CTO requires that we have a proper license to ensure we can legally use it.

If you have no preference, might I suggest the MIT License which is quite popular in many open source projects?

A simple addition to the JS file would do the trick:

// May be freely distributed under the MIT license.

Has anyone already used this plugin with Bootstrap3? Input fields are now default 100% width so the error message will appear below instead of next to the input field if you place the field within a DIV as bootstrap suggests.

Forms: http://getbootstrap.com/css/#forms-horizontal

Ever thought of renaming this library? "nod.js" is so similar to "node.js" that it's very hard to find it on Google etc. even when using the correct name.

Pressing the enter key inside a form will cause it to bypass Nod validation rules and submit. I've tested this behavior in IE 9, Safari 6 and Chrome 25. The form behaves as expected when you only use the Submit button.

Consider adding a metric 'presence-if'

use case:
you have a select field "school": [ "UCLA", "Harvard", "Yale", "other" ] and a text field called "other_school". the "other_school" field would need "presence" only if the value for "school" is "other"

[ 'input[name=other_school]', 'presence-if:select[name=school]:other', "You must supply the name of your school if it's not in the list" ]

Really like this plugin and its simplicity. But I would like to integrate some server-side validation using jQuery.ajax ... is there a way to get this done? I know that you can validate with a function, but this won't work if you are waiting for an reply to the ajax request.

Using Laravel if you fill one select control like this:

<select class="span12 someclass" name="sitio" >
      <option>Select One</option>
    @foreach($rows $k => $v)
        <option value="{{ $k }}">{{ $v }}</option>
       @endforeach
</select>

The validation is activated. Even if you fill by hand it activates even if there's no change on the control. Look at the fiddle http://jsfiddle.net/AyYBT/1/

If you try to select an entry buy keeps the "select one" option, the activations is triggered. Click the control and then clicks on the page and the message is showed.

i have two doubts here if you can answer the first one then second does not exist anymore, i can solve that easily.

I have two fields url and "url label", what i want is either user can enter url or both but not only the label.. i have written the function for that like

[ '#callToActionLabel,#callToActionURL', ( function() { return !(!($('#callToActionURL').val()) && $('#callToActionLabel').val())} ), 'provide the url first' ]

it works great but if user first enter the label it will validate as false, and then if user enters the url it works fine but do not remove the error message from the label and do not enable the submit button..

can i manually call the validate on the label after calling url so it will revalidate the label?

How can I make this plugin IE8 compatible? Thanks in advance.

Hi,

When a form is correctly filled and I click on the submit button (input element with type="submit") the form is not sent. Even if silentForm is set to FALSE doesn't work. Console doesn't give any error and I tried as well with other browsers.

Regards.

I have tried for the past 3-4 hours to figure out how to submit a form after validation but could not do it. I cant believe its this hard to figure out. Could someone share a working example please.

Here is my code that does not work in case someone can glance at it.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>tester</title>
    <link href="lib/bootstrap-combined.min.css" rel="stylesheet">
    <script src="lib/jquery.min.js"></script>
    <script src="lib/bootstrap.min.js"></script>
    <script src="nod.js"></script>
</head>
<body>
<div style="width: 300px; margin:0px auto">
        <form id="myForm" action="nod.php" method="post">
            <h3 class="form-signin-heading">Please sign in</h3>
            <input type="text" name="username" id="UserID" placeholder="User Id">
            <input type="password" id="Password" name="password" placeholder="Password">
            <br>
            <button class="btn btn-primary" type="submit" name="submit">Login</button>
        </form>
</div>
<script>
var metrics = [
    [ '#UserID', 'presence', 'User ID is Required' ],
    [ '#Password', 'presence', 'Password is Required' ],
    [ '#Password', 'min-length:4', 'Must be at least 4 characters long' ]
];
 $( "#myForm" ).nod( metrics);
</script>

</body>
</html>

Currently there seems to be no way to programatically check if a form is valid. I need to do this because I have multiple forms that depend on each others (each on a different tab).

The ideal interface should be something like this: var hasErrors = $("#myform").nod().formIsErrorFree(); This would be quite easy to do if you associate the Nod class to the form and just return it when $.nod() is called without args, in a similar way other jQuery functions work.