How To Set Required and display error messag for input for combogrid in a Form ?

EasyUI Forum

May 17, 2024, 07:35:09 PM

Welcome, Guest. Please login or register.

News:

Home

Help

EasyUI Forum > General Category > EasyUI for jQuery > How To Set Required and display error messag for input for combogrid in a Form ?

Pages: [1]

« previous next »

Author

Topic: How To Set Required and display error messag for input for combogrid in a Form ? (Read 23363 times)

heru

Newbie

Posts: 12

How To Set Required and display error messag for input for combogrid in a Form ?

« on: July 15, 2012, 06:40:41 PM »

Hello,

I'm new member here, and this is my first post...

I have a form which contain some combogrid. These combogrid value must entered so the form can submitted. how to set validation on this combogrid as required since if I passed required="true" id combogrid tag ie. <input id="someid" required="true"/> there is no error message displayed in combogrid input but form validation is false.

Thank you for attentions,

heru


	Logged

stworthy

Administrator
Hero Member

Posts: 3581

Re: How To Set Required and display error messag for input for combogrid in a Form ?

« Reply #1 on: July 16, 2012, 01:26:40 AM »

For the code you posted:
<input id="someid" required="true"/>
It seems that is no problem. Could you please provide more details about your combogrid code or a link page to demonstrate your issue?


	Logged

heru

Newbie

Posts: 12

Re: How To Set Required and display error messag for input for combogrid in a Form ?

« Reply #2 on: July 16, 2012, 03:53:32 AM »

hi stworthy, thanky you for quick feedback. here is the code:
this form won't submitted when submit button clicked, but there is no informative error message just like in normal validatebox.

<!DOCTYPE html>
<html>
<head>
   <title>Test</title>
   <link rel="stylesheet" type="text/css" href="/static/css/themes/default/easyui.css">
   <link rel="stylesheet" type="text/css" href="/static/css/themes/icon.css">
   <script type="text/javascript" src="/static/js/jquery-1.7.2.min.js"></script>
   <script type="text/javascript" src="/static/js/jquery.easyui.min.js"></script>
   <script type="text/javascript">
   $(function(){
      $("#province").combogrid({
         panelWidth:500,
         url:"/core/search_provinsi/",
         idField: 'id',
         textField:'name',
         mode:'remote',
         fitColumns:true,
         columns:[[
            {field:'id',title:'ID',width:60},
            {field:'name',title:'Name',width:150}
         ]]
      });

      $('#test_form').form({
         url : '/quickaccess/province/newaction/',
         onSubmit: function(){
            var result = $("#test_form").form('validate');
            if(result){
               $(":submit", this).attr("disabled", "disabled");
               $.messager.progress();
            }
            return result;
         },
         success:function(success){
            $.messager.progress('close');

            if(success){
               $(this).form('clear');
               $.messager.show({
                  title:'Success',
                  msg:'Success'
               });
               window.location = "/quickaccess/list/";

            }else{
               $.messager.show({ // show error message
                  title: 'Error',
                  msg: success
               });
            }
         }
      });
   });
   </script>
</head>
<body>
<form method="post" id="test_form">
   <label for="id_province">Province</label>
   <input required="true" type="text" id="province">
   <input type="submit" name="save" value="save">
</form>
</body>
</html>


« Last Edit: July 16, 2012, 03:55:41 AM by heru »	Logged

stworthy

Administrator
Hero Member

Posts: 3581

Re: How To Set Required and display error messag for input for combogrid in a Form ?

« Reply #3 on: July 17, 2012, 05:42:46 PM »

The combogrid field is defined as:
<input required="true" type="text" id="province">
The attribute (required="true") is conflict with html5. There are two ways to solve this issue:

1. Don't declare required property in the <input> markup while creating combogrid component.

Code:

<input type="test" id="province" name="province">
$('#province').combogrid({
  required:true,
  ...
});

2. After create combogrid, remove the required attribute for the <input> tag:

Code:

$('#province').combogrid({
  ...
});
$('#province').removeAttr('required');

The conflict issue will be solve in next release version(1.3), in which the combogrid can be declared as:

Code:

<input class="easyui-combogrid" data-options="
  required:true,
  url: '/core/search_provinsi/',
  columns: [[
    {field:'id',title:'ID',width:60},
    {field:'name',title:'Name',width:150}
  ]]
  ...
"/>


	Logged

heru

Newbie

Posts: 12

Re: How To Set Required and display error messag for input for combogrid in a Form ?

« Reply #4 on: July 17, 2012, 08:54:49 PM »

Thankyou stworthy, it works like charm...

heru


	Logged

Pages: [1]

« previous next »