Validating that a form input is not empty

Question

Hello friends,

I have this code for Form Submit..

<input type="submit" runat="server" id="buttonSubmit" value="Add" style="width:100px;" />

My BeginForm is like this..

<% using (Html.BeginForm("Insert", "StudentController", FormMethod.Post, new { @id = "exc-" }))
       {%>

I have one textbox in my view I need to check my textbox is empty or not if it is Empty display alert box saying please Enter some value in textbox other wise go to controler..

Please any body help me out?

thanks

Answer 1

You can do this many ways, but possibly the cleanest is to use Data Annotations on your ViewModel. For example -

public class MyViewModel
{
    [Required]
    public string MyProperty { get; set; }
}

Now in your View use

<% Html.EnableClientValidation(); %>

just before you start the form. This will cause a JavaScript object to be emitted in the markup sent to the client. The script looks like this example

<script type="text/javascript">
//<![CDATA[
if (!window.mvcClientValidationMetadata) { window.mvcClientValidationMetadata = []; }
window.mvcClientValidationMetadata.push({"Fields":[{"FieldName":"FirstName","ReplaceValidationMessageContents":true,"ValidationMessageId":"FirstName_validationMessage","ValidationRules":[{"ErrorMessage":"The First Name field is required.","ValidationParameters":{},"ValidationType":"required"}]},{"FieldName":"LastName","ReplaceValidationMessageContents":false,"ValidationMessageId":"LastName_validationMessage","ValidationRules":[{"ErrorMessage":"The Last Name field is required.","ValidationParameters":{},"ValidationType":"required"}]},{"FieldName":"EmailAddress","ReplaceValidationMessageContents":false,"ValidationMessageId":"EmailAddress_validationMessage","ValidationRules":[{"ErrorMessage":"The Email Address field is required.","ValidationParameters":{},"ValidationType":"required"}]},{"FieldName":"ZipCode","ReplaceValidationMessageContents":false,"ValidationMessageId":"ZipCode_validationMessage","ValidationRules":[{"ErrorMessage":"Zip Code must be 5 character long.","ValidationParameters":{"minimumLength":0,"maximumLength":5},"ValidationType":"stringLength"},{"ErrorMessage":"Zip Code must be five digits.","ValidationParameters":{"pattern":"\\d{5}"},"ValidationType":"regularExpression"},{"ErrorMessage":"The Zip Code field is required.","ValidationParameters":{},"ValidationType":"required"}]}],"FormId":"form0","ReplaceValidationSummary":false,"ValidationSummaryId":"valSumId"});
//]]>
</script>

This object contains validation metadata that can be used by a client side validation plugin to hook up validation on the client side. The plugin that comes with ASP.NET MVC 2 is the Microsoft AJAX validator and you will need to include these scripts in the page to use the validation (MicrosoftAjax.js, MicrosoftMVCAjax.js and MicrosoftMvcValidation.js in that order).

Alternatively, if you're more comfortable with jQuery, you can get a script in the MvcFutures source that hooks the validation into the jQuery validate plugin (this isn't a fully fledged script and is missing a few pieces, such as getting client side validation summaries). The script is MicrosoftMvcJQueryValidation.js and you can get it here

The advantage of using Data Annotations is that you get the server side validation too and your client and server side validation will validate for the expected values. Also, the Data Annotations allow you to set Error Messages and names for the field labels from the attributes (error messages and display names* can also come from resource files)

*Because MVC2 was compiled against .NET 3.5 version of Data Annotations, display name cannot be set from resource files. There is a workaround to this - http://stackoverflow.com/questions/2431333/displayname-attribute-from-resources.

---

NOW THE EASY WAY

---

Just set up a submit event handler on the form

var form = document.getElementById('exc-');
var oldSubmit = form.onsubmit || function() {};
form.onsubmit = function() {
    var input = document.getElementById('myinput');
    if (input.value === '') {
        alert('please Enter some value in textbox');
        return false;
    }
    oldSubmit();
}

or with jQuery

$('#exc-').submit(function() {
    if ($('#myinput').val() === '') {
        alert('please Enter some value in textbox');
        return false;
    }              
});