jquery input validation question RSS

• • Reply
  

  wsyeager36

  Member

  385 Points

  458 Posts

  jquery input validation question

  Jul 31, 2011 07:15 PM|LINK

  Can somebody please post a simple jquery example of how to do a textbox validation to ensure that it is not empty on a form for an MVC3 project? I have searched the internet, but I can't seem to find one for .Net (even though jQuery is same for all languages).

  I get the following error in the jquery.validate.js file when starting up the project:

  Microsoft JScript runtime error: 'jQuery' is undefined

  btw, the model is not set up for validation because I'm using it with the EntityFramework, DataBase first. This is documented as not working yet. Therefore, I need to use jQuery to simply validate the UserName textbox.

  There is a UserName id on my form that is rendered for the username textbox (see below code). The below js libraries exist in my project.

  @using (Html.BeginForm())
  { @Html.ValidationSummary(false)
      <fieldset>
          <div class="editor-label">
              @Html.LabelFor(model => model.UserName)
          </div>
          <div class="editor-field">
              @Html.EditorFor(model => model.UserName) @*            @Html.ValidationMessage("UserName","Required!") *@        </div>
          <div class="editor-label">
              @Html.LabelFor(model => model.UserPassword)
          </div>
          <div class="editor-label">
              @if (ViewData.Model != null)
              {
                  @Html.DisplayFor(model => ViewData.Model.UserPassword)
              }
              else
              {
                  @ViewBag.Message 
              }
          </div>
          <p>
              <input type="submit" value="Get User Password" style="color: Blue" />
          </p>
      </fieldset>
  }

  I have the following code in my \Views\Shared\_Layout.cshtml file, but doesn't seem to be working:

  <script type="text/javascript" src="../../Scripts/jquery.validate.js"></script>
      <script type="text/javascript" src="../../Scripts/jquery.validate.min.js"></script>
  

  <script src="../../Scripts/jquery-1.6.2.js" type="text/javascript"></script>
      <script src="../../Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>

      
      <script type="text/javascript">
          $(document).ready(function () {
              $("#UserName").validate();
          });
    </script>

  If possible, can someone please post an example of a jQuery autofocus method I can use as well?

  Thanks,
  
  Bill Yeager
  MCP.Net, BCIP
  • Edited by wsyeager36 on Jul 31, 2011 07:21 PM
• • Reply
  

  Anton Palyok

  Contributor

  2526 Points

  404 Posts

  Re: jquery input validation question

  Jul 31, 2011 09:23 PM|LINK

  You should remove this script references:

  <script type="text/javascript" src="../../Scripts/jquery.validate.js"></script>
  <script src="../../Scripts/jquery-1.6.2.js" type="text/javascript"></script>

  And the jQuery reference should be first of all scripts. Something like this:

  <script src="../../Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
  <script type="text/javascript" src="../../Scripts/jquery.validate.min.js"></script>
  
  <!-- Other code -->

• • Reply
  

  wsyeager36

  Member

  385 Points

  458 Posts

  Re: jquery input validation question

  Aug 01, 2011 01:29 AM|LINK

  OK... thanks....

  The page now loads, but what I think is absolutely ridiculous is that on the jquery.com site or any search I do on google, etc, for a simple example of how to use an autofocus and control validate method are not found for the jquery 1.6.2 version.

  Can somebody please post a link or sample code of how I can use these two simple methods?

  Thanks,
  
  Bill Yeager
  MCP.Net, BCIP
• • Reply
  

  Anton Palyok

  Contributor

  2526 Points

  404 Posts

  Re: jquery input validation question

  Aug 01, 2011 08:59 AM|LINK

  for autofocus try to use this pluging:

  https://github.com/miketaylr/autofocus

  You should add attribute "autofocus" to necessary element and call this jQuery plugin:
  

  <script>
      $(function(){
        $('[autofocus=""]').autofocus();
      });
    </script>

  Look for the demo here:

  http://miketaylr.com/code/autofocus.html
  

• • Reply
  

  Anton Palyok

  Contributor

  2526 Points

  404 Posts

  Re: jquery input validation question

  Aug 01, 2011 09:01 AM|LINK

  for the validation look to this plugin:

  http://bassistance.de/jquery-plugins/jquery-plugin-validation/

  and the demo of using this plugin:

  http://jquery.bassistance.de/validate/demo/

• • Reply
  

  wsyeager36

  Member

  385 Points

  458 Posts

  Re: jquery input validation question

  Aug 01, 2011 02:31 PM|LINK

  Anton, this is not an HTML5 site.

  I am using the following to generate a textbox which translates an id of UserName for the textbox property. How can I use a jQuery autofocus and field validation with this type of site? 

  <div class="editor-field">
              @Html.EditorFor(model => model.UserName)
          </div>

  Thanks,
  
  Bill Yeager
  MCP.Net, BCIP
• • Reply
  

  bruce (sqlwo...

  All-Star

  36850 Points

  5445 Posts

  Re: jquery input validation question

  Aug 01, 2011 03:04 PM|LINK

  if you want to use vanilla jquery validation instead of the builtin read the jquery valifation docs as suggested. you would see you need to add a class=require on the usename. as EditorFor does not support html attributes you woudl need to add it via jquery or use textboxfor

  $(function() {
    $('#UserName').css('require'); 
    $('#UserName').focus();
    $('form').validate();
  });
     

  bruce (sqlwork.com)
• • Reply
  

  Anton Palyok

  Contributor

  2526 Points

  404 Posts

  Re: jquery input validation question

  Aug 01, 2011 03:11 PM|LINK

  Does it make sense for autofocus for you?

  <script>
      $(function(){
        $("#UserName").focus();
      });
  </script>

  For the validation you can use above plugin. It using simply:

  <script>
      $(function(){
        $("#YourFormId").validate();
      });
  </script>

  You should only change string "YourFormId" with Id of your form.

  Read here about how to change validation rules and messages:

  http://docs.jquery.com/Plugins/Validation

  And look source code of demo page:

  http://jquery.bassistance.de/validate/demo/

• • Reply
  

  Anton Palyok

  Contributor

  2526 Points

  404 Posts

  Re: jquery input validation question

  Aug 01, 2011 03:28 PM|LINK

  To specify a class for your input you should use "TextBoxFor" instead of "EditorFor":

  @Html.TextBoxFor(model => model.UserName, new Dictionary<string, object>() {{"class", "required"}})

• • Reply
  

  wsyeager36

  Member

  385 Points

  458 Posts

  Re: jquery input validation question

  Aug 01, 2011 04:06 PM|LINK

  Anton, thanks for your time...

  I got the autofocus to work, but in order for the validation script to execute, I need to place a name on the form. When rendered as is, there is no form id. I searched the net and I see that there are many overloads for the Html.BeginForm method, but I don't see one where I can simply create and id for the form name.

  Is there a way to generate a form id using the above boldfaced syntax?

  Thanks,
  
  Bill Yeager
  MCP.Net, BCIP