I'm trying to figure out how to pass in the event object so that I can have event.preventDefault if no checkboxes are selected and show an alert on the page.
HTML
<form>
<div style="display: flex; justify-content: center">
<label><b>Environments:</b></label>
<label>
<input
type="checkbox"
th:text="QA"
th:field=*{qa}
/>
<label>
<label>
<input
type="checkbox"
th:text="Stage"
th:field=*{Stage}
/>
<label>
</div>
<button type="submit" th:id="submitSecret" th:onclick="validateEnv()>Submit</button>
</form>
JS
const validateEnv = () => {
let qa = document.getElementById("qa").checked;
let stage = document.getElementById("stage").checked;
if (!qa && !stage) {
// event.preventDefault()
alert('Please select an environment')
}
}
I'm working on a project for my internet programming class and I'm not quite sure where I made my mistake here. I had this project at least running and able to test locally up until last night when I switched to using hooks (or trying to anyway). When I run npm start this is what logs into the console on Firefox.
Uncaught TypeError: this is undefined
App App.js:67
React 11
workLoop scheduler.development.js:266
flushWork scheduler.development.js:239
performWorkUntilDeadline scheduler.development.js:533
js scheduler.development.js:571
js scheduler.development.js:633
factory react refresh:6
Webpack 24
App.js:67
App App.js:67
React 11
performConcurrentWorkOnRoot self-hosted:1406
workLoop scheduler.development.js:266
flushWork scheduler.development.js:239
performWorkUntilDeadline scheduler.development.js:533
(Async: EventHandlerNonNull)
js scheduler.development.js:571
js scheduler.development.js:633
factory react refresh:6
Webpack 24
I had not changed any of my import statements, I had only added useState. VSCode shows me no errors in my code, so I believe something is out of place, but that's why I'm here to ask.
//import logo from './logo.svg';
import './App.css';
import './form.css';
import React, { useState } from 'react';
function App(){
const [showText, setShowText] = useState(0);
const radioHandler = (showText) => {
setShowText(showText);
};
// constructor = (props) => {
// super(props);
// this.state = {
// status: 0
// };
// handleInputChange = handleInputChange.bind(this);
// handleSubmit = handleSubmit.bind(this);
// }
const handleInputChange = (event, value) => {
console.log(value);
}
const handleSubmit = (event) => {
event.preventDefault();
}
return (
<div className="form_css">
<form onSubmit={handleSubmit}>
<div className="general_info_container">
<div className="name_container">
<label className="f_name">First Name:</label>
<input
name="f_name"
type="text"
value={this.state.f_name}
onChange={handleInputChange}
placeholder="Please enter your first name"
/>
<label className="m_name">Middle Initial:</label>
<input
name="m_name"
type="text"
value={this.state.m_name}
onChange={handleInputChange}
placeholder="Please enter your middle initial"
/>
<label className="l_name">Last Name:</label>
<input
name="l_name"
type="text"
value={this.state.l_name}
onChange={handleInputChange}
placeholder="Please enter your last name"
/>
</div>
<div className="address_container">
<label>Street:</label>
<input
className="street"
type="text"
value={this.state.street}
onChange={handleInputChange}
placeholder="123 Main Street"
/>
<label>City:</label>
<input
className="city"
type="text"
value={this.state.city}
onChange={handleInputChange}
placeholder="City Name"
/>
<label>State:</label>
<input
className="state"
type="text"
value={this.state.state}
onChange={handleInputChange}
placeholder="New York"
/>
<label>Zip Code:</label>
<input
className="zip_code"
type="number"
value={this.state.zip_code}
onChange={handleInputChange}
placeholder="12345"
/>
</div>
<div>
<label>
Have you exercised regularly within the past six (6) months?
</label>
<input
className="exr_yes"
type="radio"
value="true"
onChange={handleInputChange}
/>
<input
className="exr_no"
type="radio"
value="false"
onChange={handleInputChange}
/>
<br></br>
{/* Testing radio button hide/show */}
<label>Do you have any chonic medical conditions? TEST TEST TEST TEST TEST TEST</label>
<input
className="chronic_yes"
type="radio"
value="true"
checked={showText === 1}
onClick={(e) => radioHandler(1)}
/>
<input
className="chronic_no"
type="radio"
value="false"
checked={showText === 2}
onClick={(e) => radioHandler(2)}
/>
{showText === 1 &&
<div>
<p>Test showing</p>
</div>}
{showText === 2 & <p></p>}
<div>
<label>Please enter any chronic conditions you have below:</label>
<input
className="chronic_medical"
type="text"
value={this.state.chronic_show}
onChange={handleInputChange}
/>
</div>
{/* Testing radio button hide/show
{/* Testing radio button hide/show */}
<label>Are you currently taking any medication?</label>
<input
className="meds_yes"
type="radio"
value="chronic"
onClick={(e) => radioHandler(1)}
/>
<input
className="meds_no"
type="radio"
value="chronic"
onClick={(e) => radioHandler(2)}
/>
<div id="meds_show">
<label>Please list any medications you take below:</label>
<input
className="meds_show"
type="text"
value={this.state.meds_show}
onChange={handleInputChange}
/>
</div>
{/* Testing radio button hide/show */}
{/* Testing radio button hide/show */}
<label>Do you, or have you had, any injuries?</label>
<input
className="injury_yes"
type="radio"
value="ture"
onChange={handleInputChange}
/>
<input
className="injnury_no"
type="radio"
value="false"
onChange={handleInputChange}
/>
<div id="injury_show">
<label>
Please enter any injuries you have had in the past below:
</label>
<input
className="injury_show"
type="text"
value={this.state.injury_show}
onChange={handleInputChange}
/>
</div>
{/* Testing radio button hide/show */}
<label>
Has a doctor ever suggested you only participate in medically
supervised exercise?
</label>
<input
className="supexr_yes"
type="radio"
value={this.state.supexr_yes}
onChange={handleInputChange}
/>
<input
className="supexr_no"
type="radio"
value={this.state.supexr_no}
onChange={handleInputChange}
/>
</div>
</div>
</form>
</div>
);
}
export default App;
And please, if you have any tips for a beginner they would be much appreciated!
The error is telling you exactly what is going wrong: this is being referenced and is undefined.
I can see you've commented out some lines, which looks as though you've moved away from using Class components to Functional components. Class components would understand this, but as you're now using a Functional component constructs like this.state.f_name are meaningless.
I don't want to re-write your code, but just want to point out that you probably want to do something like:
const [firstName, setFirstName] = useState("");
....
const handleInputChange = (event, value) => {
if(event.target.name == 'f_name'){
setFirstName(value);
}
console.log(value);
}
...
<input
name="f_name"
type="text"
value={firstName}
onChange={handleInputChange}
placeholder="Please enter your first name"
/>
You need to do something similar for all other input fields, and then tidy up the code.
I suggest you always start with something small (remove all other fields and just get one field working).
https://reactjs.org/docs/getting-started.html is an external starting place to get a better understanding of React. Happy coding.
You use this.state in your input field value but you are using hooks. You can create all your state variable using useState. Like the below:
const [inputValue, setInputValue] = useState({
f_name: '',
m_name: '',
...
})
return (
<div>
...
<input
name="f_name"
type="text"
value={inputValue.f_name}
onChange={handleInputChange}
placeholder="Please enter your first name"
/>
</div>
)
I have automated data entry in to webpage and in the last when I click submit button it shows one pop up in which the registration no. Generated is displayed.
I want to know is there any way I can copy that registration no and save it in excel.
Please find the pic attached.
[enter image description here][1]
[1]:
I did automated to click on submit button but after that how to read pop up have no idea where to begin, searched a lot on internet but didn't find what I was looking for.
https://i.stack.imgur.com/zMhX4.png
Please find HTML code on top there is button save named after clicking on which the pop is generated.
<input type="submit" name="ctl00$ContentPlaceHolder1$btnOk" value="Ok" id="ctl00_ContentPlaceHolder1_btnOk" class="btn" style="display:none;" />
</div>
<div id="ctl00_ContentPlaceHolder1_UpdateProgress" style="display:none;">
<img id="ctl00_ContentPlaceHolder1_Image1" src="images/loader.gif" alt="Processing" style="border-width:0px;" />
</div>
</td>
</tr>
</table>
<input type="hidden" name="ctl00$ContentPlaceHolder1$hdnVosFlag" id="ctl00_ContentPlaceHolder1_hdnVosFlag" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$hdnLNEXP_TYPE" id="ctl00_ContentPlaceHolder1_hdnLNEXP_TYPE" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$hdnHDRLNEXP_TYPE" id="ctl00_ContentPlaceHolder1_hdnHDRLNEXP_TYPE" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$hdnPFID" id="ctl00_ContentPlaceHolder1_hdnPFID" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$hdnpfRefNo" id="ctl00_ContentPlaceHolder1_hdnpfRefNo" value="0" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$hdnflagNewPan" id="ctl00_ContentPlaceHolder1_hdnflagNewPan" value="N" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$hndchkpan" id="ctl00_ContentPlaceHolder1_hndchkpan" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$hndIsStatusEnabled" id="ctl00_ContentPlaceHolder1_hndIsStatusEnabled" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$hndRetamt" id="ctl00_ContentPlaceHolder1_hndRetamt" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$hndDdlNEFTAcc" id="ctl00_ContentPlaceHolder1_hndDdlNEFTAcc" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$hndUsersol" id="ctl00_ContentPlaceHolder1_hndUsersol" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$hndneft" id="ctl00_ContentPlaceHolder1_hndneft" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$hdnAttchmentID" id="ctl00_ContentPlaceHolder1_hdnAttchmentID" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$hdnPfLvl" id="ctl00_ContentPlaceHolder1_hdnPfLvl" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$hdnvenStatus" id="ctl00_ContentPlaceHolder1_hdnvenStatus" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$TabName" id="ctl00_ContentPlaceHolder1_TabName" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$hdnMode" id="ctl00_ContentPlaceHolder1_hdnMode" value="I" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$venid" id="ctl00_ContentPlaceHolder1_venid" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$siteid" id="ctl00_ContentPlaceHolder1_siteid" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$hdncrAcc" id="ctl00_ContentPlaceHolder1_hdncrAcc" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$hdnNEFTAcc" id="ctl00_ContentPlaceHolder1_hdnNEFTAcc" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$hdnduedtflag" id="ctl00_ContentPlaceHolder1_hdnduedtflag" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$hdnpfidindex" id="ctl00_ContentPlaceHolder1_hdnpfidindex" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$hdnlstPFids" id="ctl00_ContentPlaceHolder1_hdnlstPFids" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$hdnUserType" id="ctl00_ContentPlaceHolder1_hdnUserType" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$hdnDOPLimit" id="ctl00_ContentPlaceHolder1_hdnDOPLimit" value="1000000" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$hdn_IFSC_CODE" id="ctl00_ContentPlaceHolder1_hdn_IFSC_CODE" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$hdn_account_id" id="ctl00_ContentPlaceHolder1_hdn_account_id" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$hdnExpenseSolId" id="ctl00_ContentPlaceHolder1_hdnExpenseSolId" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$hdnOrgCreationDt" id="ctl00_ContentPlaceHolder1_hdnOrgCreationDt" />
<input type="hidden" name="ctl00$ContentPlaceHolder1$hdnChkerEin" id="ctl00_ContentPlaceHolder1_hdnChkerEin" />
<script type="text/javascript" language="javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
function BeginRequestHandler(sender, args) { var oControl = args.get_postBackElement(); oControl.disabled = true; }
</script>
<script language="javascript" type="text/javascript">
function disposeTree(sender, args) {
var elements = args.get_panelsUpdating();
for (var i = elements.length - 1; i >= 0; i--) {
var element = elements[i];
var allnodes = element.getElementsByTagName('*'),
length = allnodes.length;
var nodes = new Array(length)
for (var k = 0; k < length; k++) {
nodes[k] = allnodes[k];
}
for (var j = 0, l = nodes.length; j < l; j++) {
var node = nodes[j];
if (node.nodeType === 1) {
if (node.dispose && typeof (node.dispose) === "function") {
node.dispose();
}
else if (node.control && typeof (node.control.dispose) === "function") {
node.control.dispose();
}
var behaviors = node._behaviors;
if (behaviors) {
behaviors = Array.apply(null, behaviors);
for (var k = behaviors.length - 1; k >= 0; k--) {
behaviors[k].dispose();
}
}
}
}
element.innerHTML = "";
}
}
Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(disposeTree);
</script>
</td>
</tr>
</table>
</div>
<!-- #main (end) -->
</td>
</tr>
</table>
<!-- #wrapper (end) -->
<script type="text/javascript">Cufon.now();</script>
<script type="text/javascript">
//<![CDATA[
var ctl00_mnuCRM_Data = new Object();
ctl00_mnuCRM_Data.disappearAfter = 500;
ctl00_mnuCRM_Data.horizontalOffset = 0;
ctl00_mnuCRM_Data.verticalOffset = 0;
ctl00_mnuCRM_Data.hoverClass = 'ctl00_mnuCRM_14 hover';
ctl00_mnuCRM_Data.hoverHyperLinkClass = 'ctl00_mnuCRM_13 hover';
ctl00_mnuCRM_Data.staticHoverClass = 'ctl00_mnuCRM_12 statichover';
ctl00_mnuCRM_Data.staticHoverHyperLinkClass = 'ctl00_mnuCRM_11 statichover';
theForm.oldSubmit = theForm.submit;
theForm.submit = WebForm_SaveScrollPositionSubmit;
theForm.oldOnSubmit = theForm.onsubmit;
theForm.onsubmit = WebForm_SaveScrollPositionOnSubmit;
Sys.Application.add_init(function() {
$create(Sys.Extended.UI.CalendarBehavior, {"format":"dd/MM/yyyy","id":"ctl00_ContentPlaceHolder1_TextBox1_CalendarExtender"}, null, null, $get("ctl00_ContentPlaceHolder1_txtduedt"));
});
Sys.Application.add_init(function() {
$create(Sys.Extended.UI.AutoCompleteBehavior, {"completionInterval":10,"completionListCssClass":"autocomplete_completionListElement","completionListItemCssClass":"autocomplete_listItem","completionSetCount":20,"delimiterCharacters":"","highlightedItemCssClass":"autocomplete_highlightedListItem","id":"AutoCompleteVenEx","minimumPrefixLength":2,"onHide":"{\"AnimationName\":\"Parallel\",\"Duration\":\".4\",\"AnimationChildren\":[{\"AnimationName\":\"FadeOut\",\"AnimationChildren\":[]},{\"AnimationName\":\"Length\",\"PropertyKey\":\"height\",\"StartValueScript\":\"$find(\\u0027AutoCompleteVenEx\\u0027)._height\",\"EndValue\":\"0\",\"AnimationChildren\":[]}]}","onShow":"{\"AnimationName\":\"Sequence\",\"AnimationChildren\":[{\"AnimationName\":\"OpacityAction\",\"Opacity\":\"0\",\"AnimationChildren\":[]},{\"AnimationName\":\"HideAction\",\"Visible\":\"true\",\"AnimationChildren\":[]},{\"AnimationName\":\"ScriptAction\",\"Script\":\"\\r\\n // Cache the size and setup the initial size\\r\\n var behavior = $find(\\u0027AutoCompleteVenEx\\u0027);\\r\\n if (!behavior._height) {\\r\\n var target = behavior.get_completionList();\\r\\n behavior._height = target.offsetHeight - 2;\\r\\n target.style.height = \\u00270px\\u0027;\\r\\n }\",\"AnimationChildren\":[]},{\"AnimationName\":\"Parallel\",\"Duration\":\".4\",\"AnimationChildren\":[{\"AnimationName\":\"FadeIn\",\"AnimationChildren\":[]},{\"AnimationName\":\"Length\",\"PropertyKey\":\"height\",\"StartValue\":\"0\",\"EndValueScript\":\"$find(\\u0027AutoCompleteVenEx\\u0027)._height\",\"AnimationChildren\":[]}]}]}","serviceMethod":"GetVendorList","servicePath":"/rfp/frmGSTINPaymentformTax.aspx"}, {"itemSelected":SettxtVDName_hiddenValue,"populated":HidevenImage,"populating":ShowvenImage}, null, $get("ctl00_ContentPlaceHolder1_txtVDName"));
});
Sys.Application.add_init(function() {
$create(Sys.Extended.UI.CalendarBehavior, {"format":"dd/MM/yyyy","id":"ctl00_ContentPlaceHolder1_CalendarExtender1"}, null, null, $get("ctl00_ContentPlaceHolder1_txtInvoicedt"));
});
Sys.Application.add_init(function() {
$create(Sys.Extended.UI.CalendarBehavior, {"format":"dd/MM/yyyy","id":"ctl00_ContentPlaceHolder1_CalendarExtender2"}, null, null, $get("ctl00_ContentPlaceHolder1_txtdoa"));
});
Sys.Application.add_init(function() {
$create(Sys.Extended.UI.AutoCompleteBehavior, {"completionInterval":10,"completionListCssClass":"autocomplete_completionListElement","completionListItemCssClass":"autocomplete_listItem","completionSetCount":20,"delimiterCharacters":"","highlightedItemCssClass":"autocomplete_highlightedListItem","id":"AutoCompleteEx","onHide":"{\"AnimationName\":\"Parallel\",\"Duration\":\".4\",\"AnimationChildren\":[{\"AnimationName\":\"FadeOut\",\"AnimationChildren\":[]},{\"AnimationName\":\"Length\",\"PropertyKey\":\"height\",\"StartValueScript\":\"$find(\\u0027AutoCompleteEx\\u0027)._height\",\"EndValue\":\"0\",\"AnimationChildren\":[]}]}","onShow":"{\"AnimationName\":\"Sequence\",\"AnimationChildren\":[{\"AnimationName\":\"OpacityAction\",\"Opacity\":\"0\",\"AnimationChildren\":[]},{\"AnimationName\":\"HideAction\",\"Visible\":\"true\",\"AnimationChildren\":[]},{\"AnimationName\":\"ScriptAction\",\"Script\":\"\\r\\n // Cache the size and setup the initial size\\r\\n var behavior = $find(\\u0027AutoCompleteEx\\u0027);\\r\\n if (!behavior._height) {\\r\\n var target = behavior.get_completionList();\\r\\n behavior._height = target.offsetHeight - 2;\\r\\n target.style.height = \\u00270px\\u0027;\\r\\n }\",\"AnimationChildren\":[]},{\"AnimationName\":\"Parallel\",\"Duration\":\".4\",\"AnimationChildren\":[{\"AnimationName\":\"FadeIn\",\"AnimationChildren\":[]},{\"AnimationName\":\"Length\",\"PropertyKey\":\"height\",\"StartValue\":\"0\",\"EndValueScript\":\"$find(\\u0027AutoCompleteEx\\u0027)._height\",\"AnimationChildren\":[]}]}]}","serviceMethod":"GetHSNSACList","servicePath":"/rfp/frmGSTINPaymentformTax.aspx"}, {"itemSelected":SetddlTypeValue,"populated":HidehsnImage,"populating":ShowhsnImage}, null, $get("ctl00_ContentPlaceHolder1_txtHSN_SAC"));
});
Sys.Application.add_init(function() {
$create(Sys.UI._UpdateProgress, {"associatedUpdatePanelId":"ctl00_ContentPlaceHolder1_UpdatePanel10","displayAfter":500,"dynamicLayout":true}, null, null, $get("ctl00_ContentPlaceHolder1_UpdateProgress9"));
});
Sys.Application.add_init(function() {
$create(Sys.UI._UpdateProgress, {"associatedUpdatePanelId":"ctl00_ContentPlaceHolder1_savepnlData","displayAfter":500,"dynamicLayout":true}, null, null, $get("ctl00_ContentPlaceHolder1_UpdateProgress"));
});
//]]>
</script>
</form>
</body>
</html>
I have fields in an aui form that I only want to be required when a corresponding checkbox is selected, otherwise they're not required. I'll enable these input fields using <aui:script> once the check box is enabled and only then aui validation should work.
I have tried with hiding the <aui:validator> depending condition in script.
How do I enable the validation only if my check box is selected in aui?
<aui:form action="" method="post">
<aui:input type="checkbox" name="employeeId" id="employeeId"></aui:input>
<div id="employeeDetails">
<aui:input type="text" name="name" id="employeeId2">
<%
if (true) { //default i kept true how to check this condition on check box basic
%>
<aui:validator name="required"' />
<%
}
%>
</aui:input>
<aui:input type="text" name="email" id="employeeId3">
<%
if (true) {
%>
<aui:validator name="required" />
<%
}
%>
</aui:input>
</div>
<aui:button-row>
<aui:button type="submit" />
</aui:button-row>
</aui:form>
<aui:script>
AUI().use('event', 'node', function(A) {
A.one('#employeeDetails').hide(); // to hide div by default
var buttonObject = A.all('input[type=checkbox]');
buttonObject.on('click', function(event) {
if (A.one("#<portlet:namespace/>employeeId").attr('checked')) {
A.one('#employeeDetails').show(); //for checked condition
} else {
A.one('#employeeDetails').hide(); // for non checked condition
}
});
});
</aui:script>
Reference images:
Before enabling the check box
[]
Check box enabled:
[]
This sample if(true) bothers me - it's evaluated server side on the JSP and won't have any effect, since true is always true.
However, your question is well documented within Liferay's documentation: Look for "Conditionally Requiring A Field"
Sometimes you’ll want to validate a field based on the value of
another field. You can do this by checking for that condition in a
JavaScript function within the required validator’s body.
Below is an example configuration:
<aui:input label="My Checkbox" name="myCheckbox" type="checkbox" />
<aui:input label="My Text Input" name="myTextInput" type="text">
<aui:validator name="required">
function() {
return AUI.$('#<portlet:namespace />myCheckbox').prop('checked');
}
</aui:validator>
</aui:input>
I have a form and a required field as shown below.
I added aui field validator for preventing form from submitting if the required field is empty.
But its not working.
Somebody please help me.
<aui:form id="fm" name="fm" method="post" action="<%= someURL %>">
<aui:input id="txtArea" label="value" name="preferences--txtArea--" type="textarea" style="width:330px;height:65px;" >
<aui:validator name="required" />
</aui:input>
<aui:input name="termsAndCondition" id="termsAndCondition" type="checkbox" label="termsAndConditons"/> <br>
<aui:button type="button" value="save" onClick="showDialog()" />
</aui:form>
<aui:script>
function showDialog()
{
var termsAndCondition= A.one('#<portlet:namespace/>termsAndCondition').attr('value');
var r=confirm("Are you sure to change data?");
if (r==true && termsAndCondition=="true")
{
A.one('#<portlet:namespace/>fm').submit();
}
}
</aui:script>
Try with this approach
<aui:form id="fm" name="fm" method="post" action="<%= someURL %>" onSubmit="check();>
<script type="text/javascript">
function check()
{
}
</script>
OR
you can return false from your function showDialog()
Hope this will help you
I found mistake in my code..
I used button type = "button" as you can see
<aui:button type="button" value="save" onClick="showDialog()" />
but for using aui field validator work according to requirement, to prevent from submitting the form when required field is empty. use button type="submit". so corrected line is
<aui:button type="submit" value="save" onClick="showDialog()" />
Now its working fine :) :)