jQuery Validation form, highlighting invalid inputs

Question

I have this form created in order to get a campaign name, starting/finishing date and a radio buttons to be selected.

<form:form id="submitCreateCampaignForm" action="createCampaign02" method="post" commandName="campaignModel">
    <table border="0">
        <tr>
            <td style="width: 140px;" >Campaign Name:</td>
            <td style="width: 300px;" colspan="4"><form:input path="campaignName" style="width:84%" /></td>
        </tr>
        <tr>
            <td>Campaign Duration:</td>
            <td colspan="1"><form:input type="text" path="fromDate" class="date-picker" /></td>
            <td colspan="1"><form:input type="text" path="toDate" class="date-picker" /></td>
            <td style="width: 250px"></td>
            <td style="width:250px"></td>
         </tr>
         <tr>
             <td>Campaign Type:</td>
             <td colspan="2"><form:radiobuttons path="campaignType" items="${campaignTypeList}" /></td>
             <td>
                 <button class="yellowButton"id="submitCreateCampaignButton">NEXT: CHARACTERISTICS</button>
             </td>
        </tr>
    </table>
</form:form>

I want to assure that the name is inserted (without any length check), the dates are correctly selected in dd/mm/yyyy format and one of the radio buttons is selected. If any error exists I want it's box to be bordered red.

I want to check these once the user clicks on the submit button.

$(document).ready(function() {
    $("#submitCreateCampaignButton").click( function(){
        $( "#submitCreateCampaignForm" ).submit();
    });
});

In order to check all the requirements mentioned above I tried different types of the validators but no success yet.

Can anyone suggest a good solution?

Answer 1

You can reach the various inputs with jQuery, using selectors like input[name=campaignName]

See example and fiddle below.

$(document).ready(function() {
  $("#submitCreateCampaignForm").submit(function(e) {

    var $form = $(this);
    var errors = 0;

    var campaignName=$form.find("input[name=campaignName]").val()

    if (!errors && campaignName == "") {
      alert("nono, campaignType empty");
      errors++;
    }

    var fromDate=$form.find("input[name=fromDate]").val()

    if (!errors && fromDate == "" ) {
      alert("nono, fromDate empty");
      errors++;
    }
    if (!errors && !isValidDate(fromDate)) {
      alert("nono, fromDate "+fromDate+" not a valid date");
      errors++;
    }

    // ...

    if (errors) e.preventDefault();
  });
});

// http://stackoverflow.com/questions/14636536/how-to-check-if-a-variable-is-an-integer-in-javascript/14794066#14794066

function isInt(value) {
  if (isNaN(value)) return false;
  var f=parseFloat(value);
  return f==(f|0);
}

// http://stackoverflow.com/questions/276479/javascript-how-to-validate-dates-in-format-mm-dd-yyyy

function isValidDate(date) {
    var matches = /^(\d{2})[-\/](\d{2})[-\/](\d{4})$/.exec(date);
    if (matches == null) return false;
    var d = matches[2];
    var m = matches[1] - 1;
    var y = matches[3];

    if(y>2100 || y<1900) return false; // accept only recent & not too far years

    var composedDate = new Date(y, m, d);
    return composedDate.getDate() == d &&
            composedDate.getMonth() == m &&
            composedDate.getFullYear() == y;
}

https://jsfiddle.net/ukfw3xo9/15/

This only tests two field for being not empty, a valid date, but you can test whatever you want with simple js

The !errors && in front of the tests is just to alert only for the first error, not to show all errors at once (means "if you have not already reported an error and ...").

UPDATE

Set red fields:

https://jsfiddle.net/ukfw3xo9/16/

CSS:

.red {background-color:red;}

or (border only)

.red {border:1px solid red;}

JAVASCRIPT:

$(document).ready(function() {
  $("#submitCreateCampaignForm").submit(function(e) {

    var $form = $(this);
    var errors = 0;

        $form.find("input").removeClass("red");
    var campaignName=$form.find("input[name=campaignName]").val()

    if (!errors && campaignName == "") {
      $form.find("input[name=campaignName]").addClass("red");
      errors++;
    }

    var fromDate=$form.find("input[name=fromDate]").val()

    if (!errors && fromDate == "" ) {
      $form.find("input[name=fromDate]").addClass("red");
      errors++;
    }
    if (!errors && !isValidDate(fromDate)) {
      $form.find("input[name=fromDate]").addClass("red");
      errors++;
    }

    // ...

    if (errors) e.preventDefault();
  });
});

// http://stackoverflow.com/questions/14636536/how-to-check-if-a-variable-is-an-integer-in-javascript/14794066#14794066

function isInt(value) {
  if (isNaN(value)) return false;
  var f=parseFloat(value);
  return f==(f|0);
}

// http://stackoverflow.com/questions/276479/javascript-how-to-validate-dates-in-format-mm-dd-yyyy
function isValidDate(date) {
    var matches = /^(\d{2})[-\/](\d{2})[-\/](\d{4})$/.exec(date);
    if (matches == null) return false;
    var d = matches[2];
    var m = matches[1] - 1;
    var y = matches[3];

    if(y>2100 || y<1900) return false; // accept only recent & not too far years

    var composedDate = new Date(y, m, d);
    return composedDate.getDate() == d &&
            composedDate.getMonth() == m &&
            composedDate.getFullYear() == y;
}

You can now remove all the "!errors && " (all cells will become red not only the first one).

This code is a bit ugly, just to show the concept, a cleaner way is to get the inputs only once:

var $fromDateInput=$form.find("input[name=fromDate]");
var fromDateValue=$fromDateInput.val();

if (fromDateValue == "" ) {
    $fromDateInput.addClass("red");
    errors++;
}

Answer 2

You can set a tag named 'required', and set the rigth type of field, like type 'email' when the field is an email. If the type is 'text' the browser will only check if the input is populated.

Why do you set the name of input as 'form:input', instead of just 'input'?

And a example of input with the required tag

<form>
    <input type='text' name='test' required />
    <input type='email' name='email' required /> <!-- will check if is an email -->
    <input type='number' name='telephone' required /> <!-- will check if is an number -->
    <input type='submit'/>
</form>

Read more about html5 fields, and u will need jquery validate only for some cases.

And remember, you need to re-validate on server, due to some type of hack on front.