0

I have added 4 buttons in my Html Form. and I have to add different validation and action for that button. when I attend to validate button That didn't work.,and also I have to add different action for the other buttons.May any one please Help Me..

<form id="form-sign-up" class="styled" action="DepartmentServlet" method="post">
            <fieldset>
                <h3>Department </h3>
                <ol>
                    <li class="form-row"><label>Department Id:</label>
                        <input type="text" name="departmentId" id="departmentId" class="text-input required"/><span id="errmsg"></span>
                    </li>
                    <li class="form-row"><label>Department Name:</label>
                        <input type="text" name="departmentName" id="departmentName" class="text-input required"/>
                    </li>
                    <li class="form-row"><label>Department Head:</label>
                        <select name="departmentHead" class="text-input required" id="myDropdown"style="width: 158px"> <option value="">Select Department Head</option>
                            <%

                                String val = "";
                                Department dp = new Department();
                                ResultSet rs = dp.getHeadOfDepartment();
                                while (rs.next()) {
                                    val = rs.getString(2);
                            %>

                            <option value="<%= val%>"><%= val%></option>
                            <%
                                }

                            %>


                        </select>
                    </li>
                    <li class="form-row"><label>Appointed Date:</label>
                        <input id="demo1" name="appointedDate"type="text" maxlength="25" size="25" class="text-input required"><a href="javascript:NewCal('demo1','ddmmmyyyy',true,24)"><img src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a>
            <span class="descriptions">pick a date..</span>
                    </li>

                    <li class="button-row">
                       <input type="submit" value="ADD" class="btn-submit img-swap"/>
                       <input type="submit" value="Delete" class="btn-delete img-swap"/>
                       <input type="submit" value="Update" class="btn-update img-swap"/>
                       <input type="submit" value="Search" class="btn-search img-swap"/>
                    </li>
                </ol>
            </fieldset>

$(document).ready(function() { 
     $("#departmentId").keypress(function (e)  
    { 
      //if the letter is not digit then display error and don't type anything
      if( e.which!=8 && e.which!=0 && (e.which<48 || e.which>57))
      {
        //display error message
        $("#errmsg").html("Digits Only").show().fadeOut("slow"); 
        return false;
      } 
    });
      $('.btn-delete').click(function(e){
          var $error = $('<span class="error"></span>');

         if (("#departmentId".val() == "")) {

             $parentTag.addClass('error').append($error.clone().text('Required Field'));

         }


     });

    $('.btn-submit').click(function(e){

        // Declare the function variables:
        // Parent form, form URL, email regex and the error HTML
        var $formId = $(this).parents('form');
        var formAction = $formId.attr('action');
        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
        var $error = $('<span class="error"></span>');

        // Prepare the form for validation - remove previous errors
        $('li',$formId).removeClass('error');

        $('span.error').remove();

        // Validate all inputs with the class "required"
        $('.required',$formId).each(function(){
            var inputVal = $(this).val();
            var $parentTag = $(this).parent();
            if(inputVal == ''){
                $parentTag.addClass('error').append($error.clone().text('Required Field'));
            }






            // Run the email validation using the regex for those input items also having class "email"
            if($(this).hasClass('email') == true){
                if(!emailReg.test(inputVal)){
                    $parentTag.addClass('error').append($error.clone().text('Enter valid email'));
                }
            }

            // Check passwords match for inputs with class "password"
            if($(this).hasClass('password') == true){
                var password1 = $('#password-1').val();
                var password2 = $('#password-2').val();
                if(password1 != password2){
                    $parentTag.addClass('error').append($error.clone().text('Passwords must match'));
                }
            }

        });

        // All validation complete - Check if any errors exist
        // If has errors



        if ($('span.error').length > 0) {

            $('span.error').each(function(){

                // Set the distance for the error animation
                var distance = 5;

                // Get the error dimensions
                var width = $(this).outerWidth();

                // Calculate starting position
                var start = width + distance;

                // Set the initial CSS
                $(this).show().css({
                    display: 'block',
                    opacity: 0,
                    right: -start+'px'
                })
                // Animate the error message
                .animate({
                    right: -width+'px',
                    opacity: 1
                }, 'slow');

            });
        } else {
            $formId.submit();
        }
        // Prevent form submission
        e.preventDefault();


    });

    // Fade out error message when input field gains focus
    $('.required').focus(function(){
        var $parent = $(this).parent();
        $parent.removeClass('error');
        $('span.error',$parent).fadeOut();
    });



});
2
  • What do you mean by it didn't work? Commented Aug 13, 2012 at 4:59
  • Delete Button Validation Not Working.. Commented Aug 13, 2012 at 5:00

1 Answer 1

1

Your input type is submit. So by default your form is getting submitted... You must use preventDefault() in this case

Like,

$('.btn-delete').click(function(e){
e.preventDefault();
          var $error = $('<span class="error"></span>');

         if (("#departmentId".val() == "")) {

             $parentTag.addClass('error').append($error.clone().text('Required Field'));

         }


     });

ALTERNATIVE WAY

Change your input type to button. And after finishing your validation submit your form using

$("#form-sign-up").submit();
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.